JavaScript图表工具FusionCharts Suite XT入门教程（十五）：使用Plain JS的生命周期事件

事件是使您可以使用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图表。

JavaScript图表工具，为什么选择FusionChartsstrong>点击了解！

FusionCharts Suite XT最新试用版

使用Plain JS的生命周期事件

事件是使您可以使用JavaScript响应图表的任何交互/更新来执行特定操作（例如，将数据发送到服务器等）的信 。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',    height: '400',    width: '700',    dataFormat: 'json',    renderAt: 'chart-container',    dataSource: {        "chart": {            "caption": "Countries With Most Oil Reserves [2017-18]",            "subCaption": "In MMbbl = One Million barrels",            "xAxisName": "Country",            "yAxisName": "Reserves (MMbbl)",            "numberSuffix": "K",            "theme": "fusion"        },        "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(e, d) {            var customDiv = document.createElement('p');            customDiv.style.padding = "10px";            customDiv.style.background = "rgb(245, 242, 240)";            customDiv.style.textAlign = "center";            customDiv.innerText = 'beforeDataUpdate, dataUpdated';            customDiv.className = 'inner-container';            e.data.container.appendChild(customDiv);        },        "drawComplete": function(e, d) {            var p = e.sender.ref.parentNode;            var ele = p.getElementsByClassName('inner-container');            ele[0].innerText = ele[0].innerText + ', drawComplete';        },        "renderComplete": function(e, d) {            var p = e.sender.ref.parentNode;            var ele = p.getElementsByClassName('inner-container');            ele[0].innerText = ele[0].innerText + ', renderComplete';        }    }});// RenderchartInstance.render();

上图通过以下步骤呈现：

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

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

3、将图表配置存储在JSON对象中。在JSON对象中：

• 将图表类型设置为column2d。

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

• 将设置dataFormat为JSON。

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

4、在上面的示例中：

• 使用beforeDataUpdate事件的回调处理程序。

• 使用dataUpdated事件的回调处理程序。

• 使用drawComplete事件的回调处理程序。

• 使用renderComplete事件的回调处理程序。

5、创建<div>元素以显示消息。

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

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

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

标签：