JavaScript图表工具FusionCharts Suite XT入门教程（二）：创建仪表-控件新闻-慧都网

JavaScript图表工具FusionCharts Suite XT入门教程（二）：创建仪表

翻译|使用教程|编辑：吴园园|2019-09-23 11:26:01.790|阅读 178 次

概述：FusionCharts Suite XT –业界最全面的JavaScript图表解决方案–旨在简化通过图表进行数据可视化的整个过程。本教程我们将看到如何使用Plain JavaScript渲染量规。

相关链接：

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的客户满意度得分，如下所示。

图表数据

下表显示了以上样本的阈值：

范围	颜色	十六进制代码
0-50	红色	＃F2726F
50-75	黄色	＃FFC533
75-100	绿色	＃62B58F

因此，任何小于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正版授权的朋友欢迎