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

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种以上的图表类型供您探索。

 图表数据

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

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正版授权的朋友欢迎