JavaScript圖表工具FusionCharts Suite XT入門教程（十三）：使用Plain JS動態(tài)添加圖表事件

FusionCharts Suite XT包含高級功能，可讓您向圖表添加更多上下文并簡化數(shù)據(jù)可視化。這些功能包括圖表更新，在運行時添加事件以及在運行時刪除事件。

事件是信號，通過它們您可以使用JavaScript響應(yīng)圖表的任何交互/更新，執(zhí)行特定的操作（例如，操作DOM，將數(shù)據(jù)發(fā)送到服務(wù)器等）。當(dāng)圖表成功呈現(xiàn)，數(shù)據(jù)完成加載，單擊數(shù)據(jù)圖，將鼠標(biāo)指針懸停在數(shù)據(jù)圖上時，可以使用事件來觸發(fā)操作。

本文重點介紹如何動態(tài)添加/刪除事件偵聽器到圖表中的數(shù)據(jù)圖。

如下圖所示：

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

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 messageBlock = document.createElement('p');
            messageBlock.style.textAlign = "center";
            var defaultMessage = 'Click the below buttons to add an event dynamically to a chart';
            var activatedMessage = 'Click on the plot to see the value along with the label';
            var getClickedMessage = function(categoryLabel, displayValue) {
                return 'You have clicked on plot <b>' + categoryLabel + ' </b> which has a value of <b>' + displayValue + '</b>';
            };
            messageBlock.innerText = defaultMessage;
            e.data.container.appendChild(messageBlock);
            // Create buttons
            var button1 = document.createElement('button');
            var button2 = document.createElement('button');
            var buttonWrapper = document.createElement('div');
            // Styles
            buttonWrapper.style.display = "flex";
            buttonWrapper.style.justifyContent = "center";
            button1.innerText = "ADD/LISTEN TO DATAPLOTCLICK EVENT";
            button2.innerText = "REMOVE DATAPLOTCLICK EVENT";
            // Get classNames for both button
            var classListbtn1 = button1.className.split(" ");
            var classListbtn2 = button2.className.split(" ");
            // Add class name for the style
            button1.className = button1.className + " btn btn-outline-secondary btn-sm";
            button2.className = button2.className + " btn btn-outline-secondary btn-sm";
            // Append to wrapper
            buttonWrapper.appendChild(button1);
            buttonWrapper.appendChild(button2);
            e.data.container.appendChild(buttonWrapper);
            button1.style.margin = "5px";
            button2.style.margin = "5px";
            function dataPlotClickListener(e, a) {
                var categoryLabel = e.data.categoryLabel;
                var displayValue = e.data.displayValue;
                var resMessage = getClickedMessage(categoryLabel, displayValue);
                messageBlock.innerHTML = resMessage;
            }
            button1.addEventListener('click', function() {
                button1.setAttribute('disabled', 'disabled');
                messageBlock.innerText = activatedMessage;
                e.sender.addEventListener('dataplotclick', dataPlotClickListener);
            });
            button2.addEventListener('click', function() {
                button1.removeAttribute('disabled');
                messageBlock.innerText = defaultMessage;
                e.sender.removeEventListener('dataplotclick', dataPlotClickListener);
            });
        }
    }});// RenderchartInstance.render();

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

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

2、將圖表和主題添加為依賴項。

3、將圖表配置存儲在JSON對象中。在JSON對象中：

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

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

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

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

4、在上面的示例中：

• 添加一個處理程序以跟蹤繪圖點擊。

• 添加事件偵聽器，以添加數(shù)據(jù)圖，單擊圖表。

• 設(shè)置啟用數(shù)據(jù)繪圖跟蹤時將設(shè)置默認(rèn)消息。

• dataPlotClick使用數(shù)據(jù)圖的值更新消息時，為事件添加事件偵聽器。

• 添加了一個處理程序，用于REMOVE DATAPLOTCLICK EVENT按鈕。該按鈕將圖表重置為默認(rèn)消息，并刪除事件偵聽器。

5、在中創(chuàng)建按鈕，<div>以將事件偵聽器添加到數(shù)據(jù)圖中。

6、功能已添加到按鈕以添加/刪除事件偵聽器。

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

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

想要了解或者購買FusionCharts Suite XT正版授權(quán)的朋友歡迎咨詢慧都官方客服

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