PHP建立漂亮圖表的步驟
PHP和MySQL被認為是用於伺服器端語言和資料庫的最好結合之一,目前被許多流行的web應用程式使用,那麼怎麼用PHP建立漂亮的圖表,一起來看看!
步驟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圖表包裝程式。
具體是這樣做到的:
步驟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
元素。下面是做法:
Cool Chart on its way!
要渲染圖表,我們將呼叫render方法用於上面步驟中建立的圖表物件。
$coolChart->render();
如果你正確地按照我上面提到的步驟去做,那麼現在你應該已經建立好了一個圖表。如果你在你的程式碼中發現任何錯誤,也可以參閱 GitHub程式碼倉庫以獲得這個專案的全部原始碼。