FusionCharts使用教程：在PHP程序中創建JavaScript圖表

---

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

在本系列文章中，慧都小編將為大家詳細介紹如何在PHP程序利用FusionCharts創建交互式JavaScript圖表。我們將創建基礎圖表作為入門學習，然后層層深入，通過數據庫創建帶有向下鉆取功能的高級圖表。

準備工作

1、在Web服務器根目錄下，創建一個文件夾并命名為FusionCharts_XT_with_PHP，將其作為演示文件夾。

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

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

從靜態XML創建圖表

Data URL方法告訴FusionCharts從XML或JSON文件URL中加載數據。這個URL也可以指向一個虛擬數據提供商，如/path_to/data_provider.php。
在這個例子中，我們將FusionChartsXT指向XML文件的URL。在演示文件夾中創建一個空白的PHP文件夾，將其保存為FusionCharts_XT_Data_URL.php。包含FusionCharts.php庫并創建一個簡單的HTML頁面，head標簽中包括 FusionCharts.js。

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

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

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

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

從XML字符串中創建圖表

Data String方法中，XML或JSON 隨著圖表的HTML和JavaScript代碼一起被嵌入到網頁中。此方法不需要靜態數據文件或虛擬數據提供者。然而，一旦圖表數據完成加載，數據便會顯示在頁面中。

在demo文件夾內創建一個空白的PHP文件，并保存為FusionCharts_XT_Data_String.php。

接下來，我們將創建一個字符串變量以保存圖表的XML數據。接下來，我們將使用到之前Data URL方法中所用到的同一個XML文件。復制文件內容，并將起粘貼為字符串變量的內容。

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

保存頁面，并在瀏覽器中進行瀏覽。你會發現圖表效果和先前的JavaScript圖表一樣：

提供JSON數據

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

FC_SetDataFormat("json");

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

{
"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"
}
]
}
]
}

>>>下載該示例源文件