JavaScript图表工具FusionCharts Suite XT入门教程（十六）：使用Plain JS的特殊事件

FusionCharts Suite XT API提供了广泛的事件，可用于触发图表生命周期中不同阶段或与图表交互时触发不同阶段的操作。例如，事件可用于在成功渲染图表时，在数据加载完成时，单击数据图时，鼠标指针悬停在数据图上时触发事件，等等。

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的特殊事件

FusionCharts Suite XT API提供了广泛的事件，可用于触发图表生命周期中不同阶段或与图表交互时触发不同阶段的操作。例如，事件可用于在成功渲染图表时，在数据加载完成时，单击数据图时，鼠标指针悬停在数据图上时触发事件，等等。

可拖动的柱形图如下所示：

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

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: 'dragcolumn2d',    height: '400',    width: '700',    dataFormat: 'json',    renderAt: 'chart-container',    dataSource: {        "chart": {            "caption": "Android and iOS Devices Sales Projections",            "subCaption": "Drag the top of columns to adjust projections for 2017 & 2018",            "numberPrefix": "$",            "numberSuffix": "M",            "yaxismaxvalue": "200",            "theme": "fusion",            "plotToolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"        },        "categories": [{            "category": [{                "label": "2014",                "fontItalic": "0"            }, {                "label": "2015",                "fontItalic": "0"            }, {                "label": "2016",                "fontItalic": "0"            }, {                "label": "2017 (Projected)"            }, {                "label": "2018 (Projected)"            }]        }],        "dataset": [{            "seriesname": "Android Devices",            "data": [{                "value": "73",                "alpha": "100",                "allowDrag": "0"            }, {                "value": "80",                "alpha": "100",                "allowDrag": "0"            }, {                "value": "97",                "alpha": "100",                "allowDrag": "0"            }, {                "value": "110",                "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"            }, {                "value": "180",                "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"            }]        }, {            "seriesname": "iOS Devices",            "data": [{                "value": "63.2",                "alpha": "100",                "allowDrag": "0"            }, {                "value": "68",                "alpha": "100",                "allowDrag": "0"            }, {                "value": "82",                "alpha": "100",                "allowDrag": "0"            }, {                "value": "99",                "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"            }, {                "value": "150",                "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"            }]        }]    },    "events": {        "beforeRender": function(e, d) {            var message = "Drag any column for years 2017 or 2018 to see updated value along with the label";            var customDiv = document.createElement('p');            customDiv.innerText = message;            customDiv.style.padding = "10px";            customDiv.style.background = "rgb(245, 242, 240)";            customDiv.style.textAlign = "center";            customDiv.style.fontFamily = ""            e.data.container.appendChild(customDiv);            e.sender.addEventListener("dataplotdragend", function(event, args) {                var prev = FusionCharts.formatNumber(args.startValue.toFixed(2));                var curr = FusionCharts.formatNumber(args.endValue.toFixed(2));                var label = event.sender.args.dataSource.categories[0].category[args.dataIndex].label;                var eventMessage = '<b>' + args.datasetName + '</b> dataset, its previous value was <b>' + prev + '</b> and its current value is <b>' + curr + '</b> for year ' +                    '<b>' + label + '</b>';                customDiv.innerHTML = eventMessage;            });        }    }});// RenderchartInstance.render();

上图通过以下步骤呈现：

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

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

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

• 将图表类型设置为column2d。

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

• 将设置dataFormat为JSON。

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

4、设置message随图表呈现一起显示的。

5、在上面的示例中：

• 使用事件监听器进行dataPlotDragEnd事件。

• 使用该dragPlotDragEnd事件可显示一条消息，其中包含已拖动列的数据集，初始值和最终值。

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

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

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

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

标签：