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è)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(yè)的JavaScript圖表。

FusionCharts Suite XT最新版本3.14.0-sr.1 發(fā)布，此版本是一個(gè)維護(hù)版本，修復(fù)了之前的一些BUG，感興趣的朋友趕快下載體驗(yàn)吧~（點(diǎn)擊查看更新詳情）

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

創(chuàng)建你的第一個(gè)量表

量表是功能強(qiáng)大的工具，可以使用徑向或線性比例顯示信息來(lái)顯示數(shù)據(jù)。

首先，我們將構(gòu)建一個(gè)簡(jiǎn)單的角度規(guī)，展示Nordstrom的客戶滿意度得分，如下所示。

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

下表顯示了以上樣本的閾值：

因此，任何小于50的分?jǐn)?shù)都是不好的，并顯示為紅色。50至75之間的任何分?jǐn)?shù)均為平均值，并以黃色顯示。任何高于75的分?jǐn)?shù)表示良好，并以綠色顯示。

FusionCharts接受JSON格式的數(shù)據(jù)。以下代碼是上面表格的JSON表示形式，具有呈現(xiàn)上面圖表所需的屬性。

{
  // Chart Configuration
  "chart": {
    "caption": "Nordstrom's Customer Satisfaction Score for 2017",
    "lowerLimit": "0",
    "upperLimit": "100",
    "showValue": "1",
    "numberSuffix": "%",
    "theme": "fusion",
    "showToolTip": "0"
  },
  // Chart Data
  "colorRange": {
    "color": [
      {
        "minValue": "0",
        "maxValue": "50",
        "code": "#F2726F"
      },
      {
        "minValue": "50",
        "maxValue": "75",
        "code": "#FFC533"
      },
      {
        "minValue": "75",
        "maxValue": "100",
        "code": "#62B58F"
      }
    ]
  },
  "dials": {
    "dial": [
      {
        "value": "81"
      }
    ]
  }}

窗體頂端

在上面的JSON中：

• 創(chuàng)建chart對(duì)象以定義量規(guī)的元素。

• 創(chuàng)建colorRange對(duì)象以設(shè)置與特定值范圍關(guān)聯(lián)的顏色。

• 指定minValue和maxValue該內(nèi)color的下陣列colorRange對(duì)象。

• 設(shè)置code屬性以指定相應(yīng)范圍的十六進(jìn)制顏色。

• 創(chuàng)建dials代表客戶滿意度得分的對(duì)象。

• 在dial對(duì)象下創(chuàng)建dials對(duì)象以設(shè)置客戶滿意度得分的值。

圖表對(duì)象和相應(yīng)的數(shù)組包含一組稱為的鍵值對(duì)attributes。這些屬性用于設(shè)置量規(guī)的功能和外觀屬性。

現(xiàn)在，您已經(jīng)有了JSON格式的數(shù)據(jù)，現(xiàn)在讓我們來(lái)繪制量規(guī)。

渲染量表

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

1、包括fusioncharts庫(kù)。

2、包括量表類型。

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

4、將儀表和主題作為依賴項(xiàng)添加到核心。

5、將圖表配置存儲(chǔ)在JSON對(duì)象中。在此JSON對(duì)象中：

• 將圖表類型設(shè)置為angulargauge。每種圖表類型均以唯一的圖表別名表示。對(duì)于角規(guī)，別名為angulargauge。

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

• 將設(shè)置dataFormat為JSON。

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

6、為量規(guī)添加一個(gè)容器（實(shí)例）。

合并的代碼如下：

    My first gauge using FusionWidgets XT    
        
            An angular gauge will load here!

繪制圖表時(shí)遇到問(wèn)題？

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

• 如果頁(yè)面上出現(xiàn)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ù)據(jù)時(shí)出錯(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)的朋友歡迎咨詢慧都官方客服