PHP創建漂亮圖表的步驟

來源:文萃谷 2.97W

PHP和MySQL被認為是用於服務器端語言和數據庫的最好結合之一,目前被許多流行的web應用程序使用,那麼怎麼用PHP創建漂亮的圖表,一起來看看!

PHP創建漂亮圖表的步驟

  步驟0:準備數據

由於需要在計劃對數據可視化之前,先準備好數據,所以我叫這一步為步驟0,而非步驟-1。

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

月份收入
Oct490000
Nov900000
Dec730000

下面是上述數據的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代碼倉庫以獲得這個項目的全部源代碼。

熱門標籤