FusionCharts使用教程：在PHP程序中創(chuàng)建JavaScript圖表

---

絕大多數(shù)圖表控件都可用于PHP應(yīng)用程序，其中大部門是服務(wù)器端組件，無(wú)需任何交互即可生成圖表和儀表的靜態(tài)圖像，而一些客戶端圖表組件則需要借助于JavaScript來(lái)生成交互式圖表、儀表和網(wǎng)格。FusionCharts為PHP開發(fā)者提供了服務(wù)器端庫(kù)，開發(fā)人員無(wú)需精通JavaScript也能在JavaScript中創(chuàng)建圖表。FusionCharts提供的服務(wù)器端庫(kù)有助于鏈接到數(shù)據(jù)源，生成圖表數(shù)據(jù)以及所需的HTML和JavaScript代碼。

在本系列文章中，慧都小編將為大家詳細(xì)介紹如何在PHP程序利用FusionCharts創(chuàng)建交互式JavaScript圖表。我們將創(chuàng)建基礎(chǔ)圖表作為入門學(xué)習(xí)，然后層層深入，通過(guò)數(shù)據(jù)庫(kù)創(chuàng)建帶有向下鉆取功能的高級(jí)圖表。

準(zhǔn)備工作

1、在Web服務(wù)器根目錄下，創(chuàng)建一個(gè)文件夾并命名為FusionCharts_XT_with_PHP，將其作為演示文件夾。

2、從 FusionCharts XT下載包復(fù)制整個(gè)Charts文件夾，并粘貼至演示文件夾。這樣就完成了FusionCharts XT安裝至web應(yīng)用程序。

3、在FusionCharts XT Download Package > Code > PHP > Includes中將Includes文件夾復(fù)制到演示文件夾。

從靜態(tài)XML創(chuàng)建圖表

Data URL方法告訴FusionCharts從XML或JSON文件URL中加載數(shù)據(jù)。這個(gè)URL也可以指向一個(gè)虛擬數(shù)據(jù)提供商，如/path_to/data_provider.php。
在這個(gè)例子中，我們將FusionChartsXT指向XML文件的URL。在演示文件夾中創(chuàng)建一個(gè)空白的PHP文件夾，將其保存為FusionCharts_XT_Data_URL.php。包含F(xiàn)usionCharts.php庫(kù)并創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁(yè)面，head標(biāo)簽中包括 FusionCharts.js。

在chartContainer的div中調(diào)用renderChart()方法。該方法可生成創(chuàng)建圖表所需的所有HTML和JavaScript代碼。我們將在container div中，編寫所生成的代碼。由于要在JavaScript中渲染圖表，我們需要在選擇之前指定該操作：

保存頁(yè)面，并在頁(yè)面中瀏覽也頁(yè)面，JavaScript圖表效果如下：

renderChart() 方法將按照下列順序使用參數(shù)：

• Chart SWF文件名稱：第一個(gè)參數(shù)包含chart SWF文件的路徑和文件名稱。SWF文件采用相對(duì)路徑。當(dāng)在JavaScript中繪制圖表時(shí)，F(xiàn)usionCharts XT采用SWF名稱來(lái)內(nèi)部隱射至圖表的JavaScript 別名。
• 如果采用Data URL方法，URL使用靜態(tài)XML文件。
• 如果采用Data String方法，變量需要包含XML數(shù)據(jù)串。
• 圖表ID：頁(yè)面上的每一個(gè)圖表都需要一個(gè)唯一的ID。這個(gè)ID不同于DIV中的ID。
• 寬度和高度像素：每個(gè)圖表的寬度和高度都需要被初始化，指定為像素或百分比。在本文中，我們將寬度和高度指定為像素。您還可以將其設(shè)置為百分比值。FusionCharts JavaScript類可自動(dòng)將百分比轉(zhuǎn)換為像素。
• Boolean for Debug Mode：如果你在開發(fā)圖表的過(guò)程中遇到問(wèn)題，你可以在調(diào)試模式下將Boolean for Debug Mode設(shè)置為true來(lái)初始化圖表。
• Boolean for Registering with JavaScript：在FusionCharts的早期版本中，最后一個(gè)參數(shù)允許你通過(guò)JavaScrip來(lái)控制圖表。如今，這個(gè)參數(shù)被強(qiáng)制設(shè)置為true。

從XML字符串中創(chuàng)建圖表

Data String方法中，XML或JSON 隨著圖表的HTML和JavaScript代碼一起被嵌入到網(wǎng)頁(yè)中。此方法不需要靜態(tài)數(shù)據(jù)文件或虛擬數(shù)據(jù)提供者。然而，一旦圖表數(shù)據(jù)完成加載，數(shù)據(jù)便會(huì)顯示在頁(yè)面中。

在demo文件夾內(nèi)創(chuàng)建一個(gè)空白的PHP文件，并保存為FusionCharts_XT_Data_String.php。

接下來(lái)，我們將創(chuàng)建一個(gè)字符串變量以保存圖表的XML數(shù)據(jù)。接下來(lái)，我們將使用到之前Data URL方法中所用到的同一個(gè)XML文件。復(fù)制文件內(nèi)容，并將起粘貼為字符串變量的內(nèi)容。

在div中再次調(diào)用renderChart() 方法。

保存頁(yè)面，并在瀏覽器中進(jìn)行瀏覽。你會(huì)發(fā)現(xiàn)圖表效果和先前的JavaScript圖表一樣：

提供JSON數(shù)據(jù)

你可以在特定圖表的 renderChart() 方法前，調(diào)用下列方法為圖表提供JSON數(shù)據(jù)。

FC_SetDataFormat("json");

我們提供了一個(gè)可以從XML圖表數(shù)據(jù)轉(zhuǎn)換為JSON數(shù)據(jù)的工具。該工具位于FusionCharts Download Package > Tools > FCDataConverter。你可以 將以下代碼粘貼到上述XML中并獲取JSON圖表數(shù)據(jù)：

{
"chart": {
"caption": "Top 25 Multilingual Countries vs Their Population",
"pyaxisname": "Languages Spoken",
"syaxisname": "Population",
"showvalues": "0",
"useroundedges": "1",
"palette": "3",
"numvisibleplot": "5",
"sformatnumberscale": "1",
"linethickness": "5",
"anchorradius": "5"
},
"categories": [
{
"category": [
{
"label": "Canada"
},
{
"label": "China"
},
{
"label": "India"
},
{
"label": "United States"
},
{
"label": "Russian Federation"
},
{
"label": "Tanzania"
},
{
"label": "South Africa"
},
{
"label": "Congo, The Democratic Republic of the"
},
{
"label": "Kenya"
},
{
"label": "Mozambique"
},
{
"label": "Philippines"
},
{
"label": "Uganda"
},
{
"label": "Nigeria"
},
{
"label": "Iran"
},
{
"label": "Sudan"
},
{
"label": "Angola"
},
{
"label": "Vietnam"
},
{
"label": "Indonesia"
},
{
"label": "Czech Republic"
},
{
"label": "Austria"
},
{
"label": "Pakistan"
},
{
"label": "Myanmar"
},
{
"label": "Chad"
},
{
"label": "Sierra Leone"
},
{
"label": "Namibia"
}
]
}
],
"dataset": [
{
"seriesname": "Languages Spoken",
"showvalues": "1",
"data": [
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "11"
},
{
"value": "11"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "9"
},
{
"value": "9"
},
{
"value": "9"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
}
]
},
{
"seriesname": "Population",
"parentyaxis": "S",
"data": [
{
"value": "31147000"
},
{
"value": "1277558000"
},
{
"value": "1013662000"
},
{
"value": "278357000"
},
{
"value": "146934000"
},
{
"value": "33517000"
},
{
"value": "40377000"
},
{
"value": "51654000"
},
{
"value": "30080000"
},
{
"value": "19680000"
},
{
"value": "75967000"
},
{
"value": "21778000"
},
{
"value": "111506000"
},
{
"value": "67702000"
},
{
"value": "29490000"
},
{
"value": "12878000"
},
{
"value": "79832000"
},
{
"value": "212107000"
},
{
"value": "10278100"
},
{
"value": "8091800"
},
{
"value": "156483000"
},
{
"value": "45611000"
},
{
"value": "7651000"
},
{
"value": "4854000"
},
{
"value": "1726000"
}
]
}
]
}

>>>下載該示例源文件