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

原创|使用教程|编辑:吴园园|2019-09-19 11:29:53.230|阅读 77 次

概述:本文我们将了解如何在系统上安装FusionCharts库和所有其他依赖项,并使用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最新版

安装

要安装FusionCharts Suite,请按照以下步骤操作:

1. 包括CDN中的FusionCharts JavaScript文件。

2. 包括主题文件。

 使用FusionCharts创建图表

让我们创建一个列2D图表,显示“石油储量最多的国家”。

FusionCharts Suite有95种以上的图表类型供您探索。

跨平台、跨浏览器JavaScript图表工具FusionCharts Suite XT入门教程(一):创建图表

 图表数据

呈现上图的数据如下表所示:

国家

石油储量

委内瑞拉

290K

沙特

260K

加拿大

180K

伊朗

140K

俄国

115K

阿联酋

100K

美国

30K

中国

30K

FusionCharts接受JSON格式的数据。以下代码是上表的JSON表示,其中包含呈现上图的必需属性。

 {
  // Chart Configuration
  "chart": {
    "caption": "Countries with Most Oil Reserves [2017-18]",
    "subCaption": "In MMbbl = One Million barrels",
    "xAxisName": "Country",
    "yAxisName": "Reserves (MMbbl)",
    "numberSuffix": "K",
    "theme": "fusion"
  },
  // Chart Data
  "data": [
    {
      "label": "Venezuela",
      "value": "290"
    },
    {
      "label": "Saudi",
      "value": "260"
    },
    {
      "label": "Canada",
      "value": "180"
    },
    {
      "label": "Iran",
      "value": "140"
    },
    {
      "label": "Russia",
      "value": "115"
    },
    {
      "label": "UAE",
      "value": "100"
    },
    {
      "label": "US",
      "value": "30"
    },
    {
      "label": "China",
      "value": "30"
    }
  ]}

FusionCharts中不同类型的图表根据其分组需要不同的JSON格式。探索不同的JSON格式,例如,单系列,多系列,组合图表。

在上面的JSON数据中:

  • 创建chart对象以定义图表的元素。

  • 设置caption和subcaption图表。

  • 将xAxisName属性值设置为Country(表的第一列)。

  • 将yAxisName属性值设置为Reserves(表的第二列)。

  • 在data数组中,为每行创建对象并指定label表示Country 的属性。例如,委内瑞拉。

  • 同样,指定value属性以设置各个国家/地区的石油储量值。例如,290K的委内瑞拉。

  • 设置numberSuffix属性以设置值的单位。

  • 设置theme属性以将预定义主题应用于图表。

图表对象和数据数组都包含一组称为属性的键值对。这些属性用于设置图表的功能和外观属性。

现在你有了JSON格式的数据,让我们渲染图表。

渲染图表

要渲染图表,请按照以下步骤操作:

  1. 包括fusioncharts库。

  2. 包括图表类型。

  3. 包括FusionCharts主题文件以将样式应用于图表。

  4. 将图表配置存储在JSON对象中。在这个JSON对象中:

  5. 将图表类型设置为column2d。每种图表类型都使用唯一的图表别名表示。对于列2D图表,别名是column2d。

  6. 设置宽度和高度(以像素为单位)。

  7. 设置dataFormat为JSON。

  8. 将json数据嵌入为。的值dataSource。

  9. 为图表添加容器(实例)。

合并代码如下所示:

My first chart using FusionCharts Suite XT    FusionCharts XT will load here!

为两个模块呈现图表的步骤如下所示:

ES6

// Include the core fusioncharts file from core  -import FusionCharts from 'fusioncharts/core';// Include the chart from viz folder// E.g. - import ChartType from fusioncharts/viz/[ChartType]import Column2D from 'fusioncharts/viz/column2d';// Include the fusion themeimport FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';// Add the chart and theme as dependency// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
type: 'Column2D',
width: '700', // Width of the chart
height: '400', // Height of the chart
dataFormat: 'json', // Data type
renderAt:'chart-container', //Container where the chart will render
dataSource: {// Chart Configuration"chart": {"caption": "Countries With Most Oil Reserves [2017-18]","subCaption": "In MMbbl = One Million barrels","xAxisName": "Country","yAxisName": "Reserves (MMbbl)","numberSuffix": "K","theme": "fusion"},// Chart Data"data": [{"label": "Venezuela","value": "290"}, {"label": "Saudi","value": "260"}, {"label": "Canada","value": "180"}, {"label": "Iran","value": "140"}, {"label": "Russia","value": "115"}, {"label": "UAE","value": "100"}, {"label": "US","value": "30"}, {"label": "China","value": "30"}]}});// Render
chartInstance.render();

CJS

var FusionCharts = require('fusioncharts');// Require charts from fusionchartsvar Charts = require('fusioncharts/fusioncharts.charts');// Require theme from fusionchartsvar FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');// Add charts and themes as dependencyCharts(FusionCharts);FusionTheme(FusionCharts);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
type: 'Column2D',
width: '700', // Width of the chart
height: '400', // Height of the chart
dataFormat: 'json', // Data type
renderAt:'chart-container', //Container where the chart will render
dataSource: {// Chart Configuration"chart": {"caption": "Countries With Most Oil Reserves [2017-18]","subCaption": "In MMbbl = One Million barrels","xAxisName": "Country","yAxisName": "Reserves (MMbbl)","numberSuffix": "K","theme": "fusion"},// Chart Data"data": [{"label": "Venezuela","value": "290"}, {"label": "Saudi","value": "260"}, {"label": "Canada","value": "180"}, {"label": "Iran","value": "140"}, {"label": "Russia","value": "115"}, {"label": "UAE","value": "100"}, {"label": "US","value": "30"}, {"label": "China","value": "30"}]}});// Render
chartInstance.render();

要包括特定图表类型,请使用单独添加以下文件 require

  • PowerCharts -fusioncharts/fusioncharts.powercharts

  • 小部件 -fusioncharts/fusioncharts.widgets

  • 甘特 -fusioncharts/fusioncharts.gantt

  • 树形图 - fusioncharts/fusioncharts.treemap

  • Zoomscatter -fusioncharts/fusioncharts.zoomscatter

  • Zoomline -fusioncharts/fusioncharts.zoomline

  • 重叠bar -fusioncharts/fusioncharts.overlappedbar2d

  • 重叠列 -fusioncharts/fusioncharts.overlappedcolumn2d

现在您使用Plain JavaScript的第一个图表已准备就绪。

渲染图表出现问题

如果出现错误,并且您无法看到图表,请检查以下内容:

  • 如果您在页面上收到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-chart-using-plain-javascript

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

FusionCharts XT

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

FusionWidgets XT

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

PowerCharts XT

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

FusionMaps XT

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

在线
客服
在线
QQ
咨询
电话
173-8239-2642
购物车 反馈 返回
顶部
在线客服系统
live chat