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

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來制作專業(yè)的JavaScript圖表。

JavaScript圖表工具，為什么選擇FusionCharts？點擊了解！

點擊下載FusionCharts Suite XT最新試用版

使用Plain JS的生命周期事件

如下圖所示：

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

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();

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

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

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

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

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

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

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

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

4、在上面的示例中：

• 使用beforeDataUpdate事件的回調(diào)處理程序。

• 使用dataUpdated事件的回調(diào)處理程序。

• 使用drawComplete事件的回調(diào)處理程序。

• 使用renderComplete事件的回調(diào)處理程序。

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

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

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

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