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

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

图表数据

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

因此，任何小于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!

绘制图表时遇到问题/span>

如果出现错误，并且您看不到图表，请检查以下内容：

• 如果页面上出现JavaScript错误，请检查浏览器控制台中的确切错误并进行相应修复。

• 如果该图表完全没有显示，但是没有JavaScript错误，请检查FusionCharts Suite XT JavaScript库是否正确加载。您可以在浏览器中使用开发人员工具查看是否fusioncharts.js已加载。

• 如果收到“ 正在加载数据”或“ 在加载数据时出错”消息，请检查JSON数据结构是否正确，或代码中与引 相关的冲突。

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

想了解更多关于FusionCharts Suite XT资源，请点击此处

想要了解或者购买FusionCharts Suite XT正版授权的朋友欢迎咨询官方客服

标签：