JavaScript图表工具FusionCharts Suite XT入门教程(十六):使用Plain JS的特殊事件

翻译|使用教程|编辑:吴园园|2019-12-23 15:47:11.303|阅读 28 次

概述:FusionCharts Suite XT API提供了广泛的事件,可用于触发图表生命周期中不同阶段或与图表交互时触发不同阶段的操作。例如,事件可用于在成功渲染图表时,在数据加载完成时,单击数据图时,鼠标指针悬停在数据图上时触发事件,等等。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XTPowerCharts 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提供了广泛的事件,可用于触发图表生命周期中不同阶段或与图表交互时触发不同阶段的操作。例如,事件可用于在成功渲染图表时,在数据加载完成时,单击数据图时,鼠标指针悬停在数据图上时触发事件,等等。

本文重点介绍如何动态拖动列并将修改后的值显示为文本。

可拖动的柱形图如下所示:

JavaScript图表工具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: '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正版授权的朋友欢迎咨询慧都官方客服

JavaScript图表工具FusionCharts Suite XT入门教程(十六):使用Plain JS的特殊事件



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/special-events-using-plain-javascript

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

在线
客服
在线
QQ
咨询
电话
177-4994-3557
购物车 反馈 返回
顶部
在线客服系统
live chat