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图表工具，为什么选择FusionCharts？点击了解！

点击下载FusionCharts Suite XT最新试用版

绑定事件监听器

将鼠标指针悬停在任何一个数据图上，然后查看图表下方呈现的文本（数据标签和值）如何变化。

例如，如果将鼠标指针悬停在加拿大数据图上，则图表下方将显示以下文本：

您目前正在将鼠标悬停在价值180的加拿大上

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

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": {
            "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(evt, args) {
            var controllers = document.createElement('div');
            controllers.innerHTML = "Hover on the plot to see the value along with the label";
            controllers.setAttribute('id', 'indicatorDiv');
            controllers.style.padding = "10px";
            controllers.style.background = "rgb(245, 242, 240)";
            controllers.style.textAlign = "center";
            controllers.style.fontFamily = ""
            args.container.appendChild(controllers);
        },
        "dataplotRollOver": function(evt, data) {
            var txt = "You are currently hovering over " + data.categoryLabel + " whose value is " + data.value;
               document.getElementById("indicatorDiv").innerHTML = txt;
        },
        "dataplotRollOut": function(evt, data) {
            document.getElementById("indicatorDiv").innerHTML = "Hover on the plot to see the value along with the label";
        }
    }});// RenderchartInstance.render();

上图通过以下步骤呈现：

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

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

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

• 将图表类型设置为column2d。

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

• 将设置dataFormat为JSON。
  

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

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

5、在上面的示例中：

• 使用将dataplotRollOver鼠标指针悬停在数据图上时触发的事件。
  

• 使用dataplotRollOut鼠标指针从数据图中滚出时触发的事件。

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

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

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

想要了解或者购买FusionCharts Suite XT正版授权的朋友欢迎

关注下方微信公众号，及时获取产品最新消息和最新资讯