JavaScript圖表工具FusionCharts Suite XT入門教程（二）：創建儀表

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

FusionCharts Suite XT最新版本3.14.0-sr.1 發布，此版本是一個維護版本，修復了之前的一些BUG，感興趣的朋友趕快下載體驗吧~（點擊查看更新詳情）

點擊下載FusionCharts Suite XT最新試用版

創建你的第一個量表

量表是功能強大的工具，可以使用徑向或線性比例顯示信息來顯示數據。

首先，我們將構建一個簡單的角度規，展示Nordstrom的客戶滿意度得分，如下所示。

圖表數據

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

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

FusionCharts接受JSON格式的數據。以下代碼是上面表格的JSON表示形式，具有呈現上面圖表所需的屬性。

{
  // 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中：

• 創建chart對象以定義量規的元素。

• 創建colorRange對象以設置與特定值范圍關聯的顏色。

• 指定minValue和maxValue該內color的下陣列colorRange對象。

• 設置code屬性以指定相應范圍的十六進制顏色。

• 創建dials代表客戶滿意度得分的對象。

• 在dial對象下創建dials對象以設置客戶滿意度得分的值。

圖表對象和相應的數組包含一組稱為的鍵值對attributes。這些屬性用于設置量規的功能和外觀屬性。

現在，您已經有了JSON格式的數據，現在讓我們來繪制量規。

渲染量表

要渲染量表，請按照以下步驟操作：

1、包括fusioncharts庫。

2、包括量表類型。

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

4、將儀表和主題作為依賴項添加到核心。

5、將圖表配置存儲在JSON對象中。在此JSON對象中：

• 將圖表類型設置為angulargauge。每種圖表類型均以唯一的圖表別名表示。對于角規，別名為angulargauge。

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

• 將設置dataFormat為JSON。

• 將json數據嵌入為的值dataSource。

6、為量規添加一個容器（實例）。

合并的代碼如下：

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

繪制圖表時遇到問題？

如果出現錯誤，并且您看不到圖表，請檢查以下內容：

• 如果頁面上出現JavaScript錯誤，請檢查瀏覽器控制臺中的確切錯誤并進行相應修復。

• 如果該圖表完全沒有顯示，但是沒有JavaScript錯誤，請檢查FusionCharts Suite XT JavaScript庫是否正確加載。您可以在瀏覽器中使用開發人員工具查看是否fusioncharts.js已加載。

• 如果收到“ 正在加載數據”或“ 在加載數據時出錯”消息，請檢查JSON數據結構是否正確，或代碼中與引號相關的沖突。

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

想了解更多關于FusionCharts Suite XT資源，請點擊此處

想要了解或者購買FusionCharts Suite XT正版授權的朋友歡迎