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现已更新至3.14.0-sr.1版本，FusionCharts Angular包装器现在与Angular 8兼容并修复了一些bug。

FusionCharts Suite XT最新试用版

使用Plain JS配置图表

FusionCharts Suite XT包含高级功能，可让您向图表添加更多上下文并简化数据可视化。这些功能包括图表更新，注释，趋势线和事件。

• 更新图表数据

• 更新图表属性

更新图表数据

下面显示了配置为动态更新数据值的图表（单击“ 更新图表数据以启动”）：

上面示例的完整代码如下：

import FusionCharts from "fusioncharts";import Charts from "fusioncharts/fusioncharts.charts";import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";// Add the chart and theme as dependencyFusionCharts.addDep(Charts);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({  type: "column2d",  renderAt: "chart-container",  width: "700",  height: "400",  dataFormat: "json",  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"      }    ]  },  events: {    beforeRender: function(evt, args) {      var controls = document.createElement("div"),        chartRef = evt.sender;      chartRef.getRandomNumber = function() {        var max = 300,          min = 50;        return Math.round((max - min) * Math.random() + min);      };      updateData = function() {        //clones data        var data = Object.assign({}, chartRef.getJSONData());        data.data[2].label = "Canada";        data.data[2].value = chartRef.getRandomNumber();        data.data[3].label = "Iran";        data.data[3].value = chartRef.getRandomNumber();        chartRef.setJSONData(data);      };      controls.innerHTML =        'Update chart data';      controls.style.cssText = "text-align: center; width: 100%;";      args.container.appendChild(controls);    }  }}); // RenderchartInstance.render();

上图通过以下步骤呈现：

1、使用包括必要的库和组件import。例如fusioncharts图书馆等

2、将图表和主题添加为依赖项。

3、使用图表选项创建图表的实例。在JSON对象中：

• 将图表类型设置为column2d。

• 设置图表的宽度和高度（以像素为单位）。

• 将设置dataFormat为JSON。

• 将json数据嵌入为的值dataSource。

4、生成随机数据以使用Math.random（）更新图表。

5、添加事件处理程序以更新图表按钮。

6、添加该updateData()功能以在单击按钮时随机更新图表的值。

7、添加，在innerHTML中创建button内部

更新图表属性

下面显示了配置为动态更新图表标题，子标题对齐方式和图表背景的图表（单击图表下方显示的任何一个按钮可更改图表背景和标题，子标题对齐方式）：

上面示例的完整代码如下：

import FusionCharts from 'fusioncharts';import Charts from 'fusioncharts/fusioncharts.charts';import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';// Add the chart and theme as dependencyFusionCharts.addDep(Charts);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({    type: 'column2d',    renderAt: 'chart-container',    width: '700',    height: '400',    dataFormat: 'json',    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"        }]    },    events: {        "beforeRender": function(evt, args) {            var chartRef = evt.sender;            chartRef.originalData = JSON.parse(JSON.stringify(chartRef.getJSONData()));            chartRef.changeBackground = function() {                var data = chartRef.getJSONData(); //copy of object                data.chart.bgColor = '#efefef';                chartRef.setJSONData(data);            };            // Resets all the chart data to it's initial verison            chartRef.resetAttr = function() {                chartRef.setJSONData(chartRef.originalData);            };            // Makes the caption text left aligned            chartRef.makeCaptionLeft = function() {                var data = chartRef.getJSONData();                data.chart.captionAlignment = 'left';                chartRef.setJSONData(data);            };            var btnContainer = document.createElement('div'),                str;            // buttons            str = 'Change Chart Background&nbsp&nbsp';            str += 'Make Caption Text Left-Aligned&nbsp&nbsp';            str += 'Reset Attributes';            btnContainer.style.cssText = "text-align: center; width: 100%; margin: 10px;";            btnContainer.innerHTML = str;            //button attachment            args.container.parentNode.insertBefore(btnContainer, args.container.nextSibling);        },        "renderComplete": function(evt, args) {            var chartRef = evt.sender,                bgColorBtn = document.getElementById('bgColorBtn'),                captionAlignBtn = document.getElementById('captionAlignBtn'),                resetAttrBtn = document.getElementById('resetAttrBtn');            bgColorBtn.onclick = chartRef.changeBackground;            captionAlignBtn.onclick = chartRef.makeCaptionLeft;            resetAttrBtn.onclick = chartRef.resetAttr;        }    }});// RenderchartInstance.render();

1、使用包括必要的库和组件import。例如fusioncharts图书馆等

2、将图表和主题添加为依赖项。

3、使用图表选项创建图表的实例。在JSON对象中：

• 将图表类型设置为column2d。

• 设置图表的宽度和高度（以像素为单位）。

• 将设置dataFormat为JSON。

• 将json数据嵌入为的值dataSource。

4、beforeRender 函数用于设置图表属性。

• changeBackground 更新了图表的背景。

• makeCaptionLeft 将标题文本设置为左对齐。

• resetAttr 将图表数据重置为其初始状态。

5、btnContainer创建按钮里面

。使用将样式设置为按钮innerHTML。

6、调用该renderComplete函数以返回呈现的图表。

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

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

标签：