JavaScript图表工具FusionCharts Suite XT入门教程(十三):使用Plain JS动态添加图表事件

翻译|使用教程|编辑:吴园园|2019-11-26 14:05:36.460|阅读 59 次

概述:FusionCharts Suite XT包含高级功能,可让您向图表添加更多上下文并简化数据可视化。这些功能包括图表更新,在运行时添加事件以及在运行时删除事件。本文重点介绍如何动态添加/删除事件侦听器到图表中的数据图。

# 购买正版开发软件送开发入门教材和电子资料,点击进入了解详情 #

相关链接:

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包含高级功能,可让您向图表添加更多上下文并简化数据可视化。这些功能包括图表更新,在运行时添加事件以及在运行时删除事件。

事件是信号,通过它们您可以使用JavaScript响应图表的任何交互/更新,执行特定的操作(例如,操作DOM,将数据发送到服务器等)。当图表成功呈现,数据完成加载,单击数据图,将鼠标指针悬停在数据图上时,可以使用事件来触发操作。

本文重点介绍如何动态添加/删除事件侦听器到图表中的数据图。

如下图所示:

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

上图通过以下步骤呈现:

1、使用包括必要的库和组件import。例如fusioncharts图书馆等

2、将图表和主题添加为依赖项。

3、将图表配置存储在JSON对象中。在JSON对象中:

  • 将图表类型设置为column2d。

  • 设置图表的宽度和高度(以像素为单位)。

  • 将设置dataFormat为JSON。

  • 将json数据嵌入为的值dataSource。

4、在上面的示例中:

  • 添加一个处理程序以跟踪绘图点击。

  • 添加事件侦听器,以添加数据图,单击图表。

  • 设置启用数据绘图跟踪时将设置默认消息。

  • dataPlotClick使用数据图的值更新消息时,为事件添加事件侦听器。

  • 添加了一个处理程序,用于REMOVE DATAPLOTCLICK EVENT按钮。该按钮将图表重置为默认消息,并删除事件侦听器。

5、在中创建按钮,<div>以将事件侦听器添加到数据图中。

6、功能已添加到按钮以添加/删除事件侦听器。

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

想了解更多关于FusionCharts Suite XT资源,请点击此处

想要了解或者购买FusionCharts Suite XT正版授权的朋友欢迎咨询慧都官方客服

关注下方微信公众号,及时获取产品最新消息和最新资讯

JavaScript图表工具FusionCharts Suite XT入门教程(十三):使用Plain JS动态添加图表事件



标签:

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

文章转载自:FusionCharts Suite XT

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

FusionCharts XT

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

FusionWidgets XT

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

PowerCharts XT

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

FusionMaps XT

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

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat