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來制作專業(yè)的JavaScript圖表。

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

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

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

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

首先，我們將構(gòu)建一個簡單的角度規(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對象以定義量規(guī)的元素。

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

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

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

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

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

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

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

渲染量表

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

1、包括fusioncharts庫。

2、包括量表類型。

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

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

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

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

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

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

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

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

合并的代碼如下：

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

繪制圖表時遇到問題？

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

• 如果頁面上出現(xiàn)JavaScript錯誤，請檢查瀏覽器控制臺中的確切錯誤并進(jìn)行相應(yīng)修復(fù)。

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

• 如果收到“ 正在加載數(shù)據(jù)”或“ 在加載數(shù)據(jù)時出錯”消息，請檢查JSON數(shù)據(jù)結(jié)構(gòu)是否正確，或代碼中與引號相關(guān)的沖突。

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

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

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