使用者PHP圖表包裝程序創(chuàng)建漂亮的圖表的方法

2019-04-02 16:33:45 來源：互聯(lián)網(wǎng)作者：佚名人氣：次閱讀 475 條評(píng)論

這篇文章中，我將講解如何一步一步使用PHP，F(xiàn)usionCharts的核心JavaScript圖表庫，以及它的PHP圖表包裝程序創(chuàng)建漂亮的圖表。...

如果你是一個(gè)后端開發(fā)人員，并且PHP是你技術(shù)堆棧的一部分，那么你會(huì)發(fā)現(xiàn)本教程非常有用。在這篇文章中，我將講解如何一步一步使用PHP，F(xiàn)usionCharts的核心JavaScript圖表庫，以及它的PHP圖表包裝程序創(chuàng)建漂亮的圖表。

下面就是我們今天要完成的目標(biāo)圖表

有四個(gè)步驟：

步驟0：準(zhǔn)備數(shù)據(jù)
步驟1：引用JS和PHP文件
步驟2：創(chuàng)建圖表對(duì)象
步驟3：渲染圖表

步驟0：準(zhǔn)備數(shù)據(jù)

由于需要在計(jì)劃對(duì)數(shù)據(jù)可視化之前，先準(zhǔn)備好數(shù)據(jù)，所以我叫這一步為步驟0，而非步驟-1。

FusionCharts既理解XML，也理解JSON數(shù)據(jù)格式，不過在本教程中，我們只用JSON。我們將通過轉(zhuǎn)換以下數(shù)據(jù)為FusionCharts認(rèn)可的JSON鍵值來啟動(dòng)我們的教程。

月份	收入
Oct	490000
Nov	900000
Dec	730000

下面是上述數(shù)據(jù)的JSON表示：

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

我們將使用上述數(shù)據(jù)繪制條形圖，并格式化我們的行為。對(duì)于其他圖表類型，可能會(huì)有點(diǎn)復(fù)雜。

步驟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：創(chuàng)建圖表對(duì)象

這一步我們要使用FusionCharts的PHP包裝程序類為我們的圖表 $coolChart 創(chuàng)建一個(gè)對(duì)象。創(chuàng)建圖表對(duì)象的語法如下：

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

下面的圖表對(duì)象用于我們要在本教程中創(chuàng)建的圖表：

$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”包含兩個(gè)對(duì)象：

圖表對(duì)象：包括負(fù)責(zé)圖表交互性和裝飾的各種屬性。它們中的一些說明如下：

showHoverEffect：（布爾型），用于啟用或禁用圖表中的懸停效果。
plotFillHoverColor：（十六進(jìn)制代碼/顏色名稱）用來定義鼠標(biāo)懸停的曲線顏色。
plotFillHoverAlpha：（整型）用于定義懸停顏色的透明度。
baseFont：（字符串）用于定義圖表的字體類型。
baseFontSize：（整型）用于設(shè)置圖表的字體大小。
baseFontColor：（十六進(jìn)制代碼/顏色名稱）用于設(shè)置圖表的字體顏色。

數(shù)據(jù)對(duì)象：包括用于每個(gè)數(shù)據(jù)圖的標(biāo)簽和它們相應(yīng)的值。可以被添加到數(shù)據(jù)對(duì)象內(nèi)的其它屬性是：

displayValue：（字符串）允許你為特殊的數(shù)據(jù)圖設(shè)置自定義的字符串值。
link：（字符串）允許你通過數(shù)據(jù)圖鏈接到網(wǎng)頁，drill-down圖表或自定義的JavaScript函數(shù)來獲取更進(jìn)一步的圖表功能。
showLabel：（布爾型）用于啟用或禁用特定數(shù)據(jù)圖（欄）的標(biāo)簽顯示。

有很多可用的自定義選項(xiàng)可以根據(jù)你的具體使用情況使用。你可以查看這個(gè)龐大的圖表屬性列表來進(jìn)行進(jìn)一步探索。

步驟3：渲染圖表

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

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

要渲染圖表，我們將調(diào)用render方法用于上面步驟中創(chuàng)建的圖表對(duì)象。

$coolChart->render();

如果你正確地按照我上面提到的步驟去做，那么現(xiàn)在你應(yīng)該已經(jīng)創(chuàng)建好了一個(gè)圖表。如果你在你的代碼中發(fā)現(xiàn)任何錯(cuò)誤，也可以參閱GitHub代碼倉庫以獲得這個(gè)項(xiàng)目的全部源代碼。

更多資源

在本教程中，我們?cè)趫D表對(duì)象內(nèi)直接傳遞JSON用于圖表，但也有其他加載數(shù)據(jù)的方法?？梢詤⒖歼@個(gè)文檔頁面來了解其他加載數(shù)據(jù)的方法。

PHP和MySQL被認(rèn)為是用于服務(wù)器端語言和數(shù)據(jù)庫的最好結(jié)合之一，目前被許多流行的web應(yīng)用程序使用。要了解更多有關(guān)于它們的用法，可以查看這篇有關(guān)如何使用PHP和來自于MySQL數(shù)據(jù)庫數(shù)據(jù)創(chuàng)建drill-down圖表的教程。