JavaScript图表工具FusionCharts Suite XT入门教程(二):创建仪表

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

概述: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正版授权的朋友欢迎咨询慧都官方客服

JavaScript图表工具FusionCharts Suite XT入门教程(二):创建仪表



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-gauge-using-plain-javascript

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat