PHP建立一個炫酷的圖表

2016-03-05 分類：WEB開發、程式設計開發、首頁精華0人評論發表於2016-03-05

PHP

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

不管有多少伺服器端語言出現，沒有誰能夠取代PHP。至少是不久的將來都不可能。 PHP還有許多最著名的web應用程式的支柱。

如果你是一個後端開發人員，並且PHP是你技術堆疊的一部分，那麼你會發現本教程非常有用。在這篇文章中，我將講解如何一步一步使用PHP，FusionCharts的核心JavaScript圖表庫，以及它的PHP圖表包裝程式建立漂亮的圖表。

下面就是我們今天要完成的目標圖表

有四個步驟：

步驟0：準備資料
步驟1：引用JS和PHP檔案
步驟2：建立圖表物件
步驟3：渲染圖表

步驟0：準備資料

由於需要在計劃對資料視覺化之前，先準備好資料，所以我叫這一步為步驟0，而非步驟-1。

FusionCharts既理解XML，也理解JSON資料格式，不過在本教程中，我們只用JSON。我們將通過轉換以下資料為FusionCharts認可的JSON鍵值來啟動我們的教程。

月份	收入
Oct	490000
Nov	900000
Dec	730000

下面是上述資料的JSON表示：

[
    {"label": "Oct", "value": "490000"},
    {"label": "Nov", "value": "900000"},
    {"label": "Dec", "value": "730000"}
]

我們將使用上述資料繪製條形圖，並格式化我們的行為。對於其他圖表型別，可能會有點複雜。

步驟1：引用依賴性

在這一步中，我們將包括FusionCharts的核心JavaScript庫和PHP圖表包裝程式。

具體是這樣做到的：

<? php
// including FusionCharts PHP wrapper
    include(path/to/fusioncharts.php);
?>

<head>
    <!-- FusionCharts core package files -->
    <script type="text/javascript" src="path/to/fusioncharts.js"></script>
</head>

步驟2：建立圖表物件

這一步我們要使用FusionCharts的PHP包裝程式類為我們的圖表 $coolChart 建立一個物件。建立圖表物件的語法如下：

$objectName = new FusionCharts("chart type",
              "unique chart ID",
              "Chart Width",
              "Chart Height",
              "HTML Element for Chart",
              "Chart Data Format",
              "Data Source");

下面的圖表物件用於我們要在本教程中建立的圖表：

$coolChart = new FusionCharts("bar2d", "myCoolPHPChart", "100%", "600",
               "barchart-container", "json",
               '{
                "chart": {
                    "caption": "Monthly revenue for Q4 - 2015",
                    "xAxisName": "Month",
                    //Other Chart Options
                },
                "data": [{
                    "label": "Oct",
                    "value": "490000"
                } //More Chart Data
            }');

上述語法中提到的“Data Source”包含兩個物件：

圖表物件：包括負責圖表互動性和裝飾的各種屬性。它們中的一些說明如下：

showHoverEffect：（布林型），用於啟用或禁用圖表中的懸停效果。
plotFillHoverColor：（十六進位制程式碼/顏色名稱）用來定義滑鼠懸停的曲線顏色。
plotFillHoverAlpha：（整型）用於定義懸停顏色的透明度。
baseFont：（字串）用於定義圖表的字型型別。
baseFontSize：（整型）用於設定圖表的字型大小。
baseFontColor：（十六進位制程式碼/顏色名稱）用於設定圖表的字型顏色。

資料物件：包括用於每個資料圖的標籤和它們相應的值。可以被新增到資料物件內的其它屬性是：

displayValue：（字串）允許你為特殊的資料圖設定自定義的字串值。
link：（字串）允許你通過資料圖連結到網頁，drill-down圖表或自定義的JavaScript函式來獲取更進一步的圖表功能。
showLabel：（布林型）用於啟用或禁用特定資料圖（欄）的標籤顯示。

有很多可用的自定義選項可以根據你的具體使用情況使用。你可以檢視這個龐大的圖表屬性列表來進行進一步探索。

步驟3：渲染圖表

在渲染圖表時，我們要定義HTML<div>元素。下面是做法：

<body>
    <div id="barchart-container">Cool Chart on its way!</div>
</body>

要渲染圖表，我們將呼叫render方法用於上面步驟中建立的圖表物件。

$coolChart->render();

如果你正確地按照我上面提到的步驟去做，那麼現在你應該已經建立好了一個圖表。如果你在你的程式碼中發現任何錯誤，也可以參閱GitHub程式碼倉庫以獲得這個專案的全部原始碼。

PHP建立一個炫酷的圖表

步驟0：準備資料

步驟1：引用依賴性

步驟2：建立圖表物件

步驟3：渲染圖表

更多資源

相關文章