JavaScript圖表工具FusionCharts Suite XT入門(mén)教程（一）：創(chuàng)建圖表

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴(lài)的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶(hù)選擇Fusioncharts來(lái)制作專(zhuān)業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts Suite XT最新版

安裝

要安裝FusionCharts Suite，請(qǐng)按照以下步驟操作：

1. 包括CDN中的FusionCharts JavaScript文件。

2. 包括主題文件。

 使用FusionCharts創(chuàng)建圖表

讓我們創(chuàng)建一個(gè)列2D圖表，顯示“石油儲(chǔ)量最多的國(guó)家”。

FusionCharts Suite有95種以上的圖表類(lèi)型供您探索。

 圖表數(shù)據(jù)

呈現(xiàn)上圖的數(shù)據(jù)如下表所示：

FusionCharts接受JSON格式的數(shù)據(jù)。以下代碼是上表的JSON表示，其中包含呈現(xiàn)上圖的必需屬性。

 {
  // Chart Configuration
  "chart": {
    "caption": "Countries with Most Oil Reserves [2017-18]",
    "subCaption": "In MMbbl = One Million barrels",
    "xAxisName": "Country",
    "yAxisName": "Reserves (MMbbl)",
    "numberSuffix": "K",
    "theme": "fusion"
  },
  // Chart Data
  "data": [
    {
      "label": "Venezuela",
      "value": "290"
    },
    {
      "label": "Saudi",
      "value": "260"
    },
    {
      "label": "Canada",
      "value": "180"
    },
    {
      "label": "Iran",
      "value": "140"
    },
    {
      "label": "Russia",
      "value": "115"
    },
    {
      "label": "UAE",
      "value": "100"
    },
    {
      "label": "US",
      "value": "30"
    },
    {
      "label": "China",
      "value": "30"
    }
  ]}

FusionCharts中不同類(lèi)型的圖表根據(jù)其分組需要不同的JSON格式。探索不同的JSON格式，例如，單系列，多系列，組合圖表。

在上面的JSON數(shù)據(jù)中：

• 創(chuàng)建chart對(duì)象以定義圖表的元素。

• 設(shè)置caption和subcaption圖表。

• 將xAxisName屬性值設(shè)置為Country（表的第一列）。

• 將yAxisName屬性值設(shè)置為Reserves（表的第二列）。

• 在data數(shù)組中，為每行創(chuàng)建對(duì)象并指定label表示Country 的屬性。例如，委內(nèi)瑞拉。

• 同樣，指定value屬性以設(shè)置各個(gè)國(guó)家/地區(qū)的石油儲(chǔ)量值。例如，290K的委內(nèi)瑞拉。

• 設(shè)置numberSuffix屬性以設(shè)置值的單位。

• 設(shè)置theme屬性以將預(yù)定義主題應(yīng)用于圖表。

圖表對(duì)象和數(shù)據(jù)數(shù)組都包含一組稱(chēng)為屬性的鍵值對(duì)。這些屬性用于設(shè)置圖表的功能和外觀屬性。

現(xiàn)在你有了JSON格式的數(shù)據(jù)，讓我們渲染圖表。

渲染圖表

要渲染圖表，請(qǐng)按照以下步驟操作：

1. 包括fusioncharts庫(kù)。

2. 包括圖表類(lèi)型。

3. 包括FusionCharts主題文件以將樣式應(yīng)用于圖表。

4. 將圖表配置存儲(chǔ)在JSON對(duì)象中。在這個(gè)JSON對(duì)象中：

5. 將圖表類(lèi)型設(shè)置為column2d。每種圖表類(lèi)型都使用唯一的圖表別名表示。對(duì)于列2D圖表，別名是column2d。

6. 設(shè)置寬度和高度（以像素為單位）。

7. 設(shè)置dataFormat為JSON。

8. 將json數(shù)據(jù)嵌入為。的值dataSource。

9. 為圖表添加容器（實(shí)例）。

合并代碼如下所示：

My first chart using FusionCharts Suite XT    FusionCharts XT will load here!

為兩個(gè)模塊呈現(xiàn)圖表的步驟如下所示：

ES6

// Include the core fusioncharts file from core  -import FusionCharts from 'fusioncharts/core';// Include the chart from viz folder// E.g. - import ChartType from fusioncharts/viz/[ChartType]import Column2D from 'fusioncharts/viz/column2d';// Include the fusion themeimport FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';// Add the chart and theme as dependency// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
type: 'Column2D',
width: '700', // Width of the chart
height: '400', // Height of the chart
dataFormat: 'json', // Data type
renderAt:'chart-container', //Container where the chart will render
dataSource: {// Chart Configuration"chart": {"caption": "Countries With Most Oil Reserves [2017-18]","subCaption": "In MMbbl = One Million barrels","xAxisName": "Country","yAxisName": "Reserves (MMbbl)","numberSuffix": "K","theme": "fusion"},// Chart Data"data": [{"label": "Venezuela","value": "290"}, {"label": "Saudi","value": "260"}, {"label": "Canada","value": "180"}, {"label": "Iran","value": "140"}, {"label": "Russia","value": "115"}, {"label": "UAE","value": "100"}, {"label": "US","value": "30"}, {"label": "China","value": "30"}]}});// Render
chartInstance.render();

CJS

var FusionCharts = require('fusioncharts');// Require charts from fusionchartsvar Charts = require('fusioncharts/fusioncharts.charts');// Require theme from fusionchartsvar FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');// Add charts and themes as dependencyCharts(FusionCharts);FusionTheme(FusionCharts);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
type: 'Column2D',
width: '700', // Width of the chart
height: '400', // Height of the chart
dataFormat: 'json', // Data type
renderAt:'chart-container', //Container where the chart will render
dataSource: {// Chart Configuration"chart": {"caption": "Countries With Most Oil Reserves [2017-18]","subCaption": "In MMbbl = One Million barrels","xAxisName": "Country","yAxisName": "Reserves (MMbbl)","numberSuffix": "K","theme": "fusion"},// Chart Data"data": [{"label": "Venezuela","value": "290"}, {"label": "Saudi","value": "260"}, {"label": "Canada","value": "180"}, {"label": "Iran","value": "140"}, {"label": "Russia","value": "115"}, {"label": "UAE","value": "100"}, {"label": "US","value": "30"}, {"label": "China","value": "30"}]}});// Render
chartInstance.render();

要包括特定圖表類(lèi)型，請(qǐng)使用單獨(dú)添加以下文件 require

• PowerCharts -fusioncharts/fusioncharts.powercharts

• 小部件 -fusioncharts/fusioncharts.widgets

• 甘特 -fusioncharts/fusioncharts.gantt

• 樹(shù)形圖 - fusioncharts/fusioncharts.treemap

• Zoomscatter -fusioncharts/fusioncharts.zoomscatter

• Zoomline -fusioncharts/fusioncharts.zoomline

• 重疊bar -fusioncharts/fusioncharts.overlappedbar2d

• 重疊列 -fusioncharts/fusioncharts.overlappedcolumn2d

現(xiàn)在您使用Plain JavaScript的第一個(gè)圖表已準(zhǔn)備就緒。

渲染圖表出現(xiàn)問(wèn)題

如果出現(xiàn)錯(cuò)誤，并且您無(wú)法看到圖表，請(qǐng)檢查以下內(nèi)容：

• 如果您在頁(yè)面上收到JavaScript錯(cuò)誤，請(qǐng)檢查瀏覽器控制臺(tái)是否存在確切錯(cuò)誤并進(jìn)行相應(yīng)修復(fù)。

• 如果圖表根本沒(méi)有顯示，但沒(méi)有JavaScript錯(cuò)誤，請(qǐng)檢查FusionCharts Suite XT JavaScript庫(kù)是否已正確加載。您可以在瀏覽器中使用開(kāi)發(fā)人員工具查看是否fusioncharts.js已加載。

• 如果在加載數(shù)據(jù)消息時(shí)收到加載數(shù)據(jù)或錯(cuò)誤，請(qǐng)檢查您的JSON數(shù)據(jù)結(jié)構(gòu)是否正確，或者代碼中是否存在與引號(hào)相關(guān)的沖突。

=====================================================

想了解更多關(guān)于FusionCharts Suite XT資源，請(qǐng)點(diǎn)擊此處

想要了解或者購(gòu)買(mǎi)FusionCharts Suite XT正版授權(quán)的朋友歡迎咨詢(xún)慧都官方客服