翻譯|使用教程|編輯:吳園園|2019-12-23 15:47:11.303|閱讀 509 次
概述:FusionCharts Suite XT API提供了廣泛的事件,可用于觸發圖表生命周期中不同階段或與圖表交互時觸發不同階段的操作。例如,事件可用于在成功渲染圖表時,在數據加載完成時,單擊數據圖時,鼠標指針懸停在數據圖上時觸發事件,等等。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
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最新試用版
使用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正版授權的朋友歡迎
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: