JavaScript圖表工具FusionCharts Suite XT入門教程（十四）：綁定事件監(jiān)聽器

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

JavaScript圖表工具，為什么選擇FusionCharts？點(diǎn)擊了解！

點(diǎn)擊下載FusionCharts Suite XT最新試用版

綁定事件監(jiān)聽器

將鼠標(biāo)指針懸停在任何一個(gè)數(shù)據(jù)圖上，然后查看圖表下方呈現(xiàn)的文本（數(shù)據(jù)標(biāo)簽和值）如何變化。

例如，如果將鼠標(biāo)指針懸停在加拿大數(shù)據(jù)圖上，則圖表下方將顯示以下文本：

您目前正在將鼠標(biāo)懸停在價(jià)值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();

上圖通過以下步驟呈現(xiàn)：

1、使用包括必要的庫和組件import。例如fusioncharts圖書館等

2、將圖表和主題添加為依賴項(xiàng)。

3、將圖表配置存儲(chǔ)在JSON對(duì)象中。在JSON對(duì)象中：

• 將圖表類型設(shè)置為column2d。

• 設(shè)置圖表的寬度和高度（以像素為單位）。
  

• 將設(shè)置dataFormat為JSON。
  

• 將json數(shù)據(jù)嵌入為的值dataSource。

4、設(shè)置message隨圖表呈現(xiàn)一起顯示的。

5、在上面的示例中：

• 使用將dataplotRollOver鼠標(biāo)指針懸停在數(shù)據(jù)圖上時(shí)觸發(fā)的事件。
  

• 使用dataplotRollOut鼠標(biāo)指針從數(shù)據(jù)圖中滾出時(shí)觸發(fā)的事件。

6、創(chuàng)建<div>元素以顯示消息。

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

想了解更多關(guān)于FusionCharts Suite XT資源，請(qǐng)點(diǎn)擊此處

想要了解或者購買FusionCharts Suite XT正版授權(quán)的朋友歡迎

關(guān)注下方微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新消息和最新資訊