JavaScript图表工具FusionCharts Suite XT入门教程(十):在运行时更改图表类型

翻译|使用教程|编辑:吴园园|2019-10-31 13:34:32.983|阅读 20 次

概述:FusionCharts Suite XT包含高级功能,可让您向图表添加更多上下文并简化数据可视化。这些功能包括图表更新,运行时更新图表类型和事件。

相关链接:

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最新试用版

在运行时更改图表类型

FusionCharts Suite XT包含高级功能,可让您向图表添加更多上下文并简化数据可视化。这些功能包括图表更新,运行时更新图表类型和事件。

本文重点介绍如何在运行时更改图表的图表类型。该示例中使用的图表类型为:

  • Column 2D

  • Bar 2D

  • Pie 2D

配置为更改图表类型的图表如下所示:

JavaScript图表工具FusionCharts Suite XT入门教程(十):在运行时更改图表类型

上面示例的完整代码如下:

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 container = e.data.container;
            // Change the sizes according to your need
            var options = {
                'column2d': 'column2d',
                'bar2d': 'bar2d',
                'pie2d': 'pie2d'
            };
            var chartSelected = 'column2d';
            function instantiate() {
                // Create option containers
                var parent = container.parentNode;
                var optionsContainer = document.createElement('div');
                optionsContainer.id = 'config-container';
                var spanLabel = document.createElement('span');
                spanLabel.id = 'select-text';
                spanLabel.innerText = "Choose a chart type: ";
                var radioContainer = document.createElement('div');
                addClass(radioContainer, 'change-type');
                window.__onChange = function(option) {
                    e.sender.chartType(option)
                }
                // Util to add class
                function addClass(element, className) {
                    var element, name = className,
                        arr;
                    arr = element.className.split(" ");
                    if (arr.indexOf(name) == -1) {
                        element.className += " " + name;
                    }
                }
                function radioWrapper(wrapperId, inputId, label, selected, optionLabel) {
                    var item = "";
                    item += "";
                    item += "" + label + ""
                    item += "";
                    return item;
                }
                var changeTypeChilds = '';
                Object.keys(options).forEach(function(option, index) {
                    var label = options[option];
                    var selected = chartSelected === option;
                    var radioOption = radioWrapper('radio' + (index + 1), 'radioButton' + (index + 1), label.toUpperCase(), selected, option);
                    changeTypeChilds += radioOption;
                });
                radioContainer.innerHTML = changeTypeChilds;
                optionsContainer.appendChild(spanLabel);
                optionsContainer.appendChild(radioContainer);
                parent.appendChild(optionsContainer);
                var css = '.change-type{display:inline-block;margin:0 10px;font-family:basefontRegular,Helvetica Neue,Arial,sans-serif}.change-type>div{display:inline-flex;position:relative;margin:0 10px}.change-type label{position:relative;padding:5px 4px 5px 30px;border-radius:4px}.change-type input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;left:0;position:absolute}.change-type label:after,.change-type label:before{content:"";position:absolute}.change-type label:before{display:block;background:#fff;border:2px solid #949697;box-shadow:none;border-radius:50%;top: 15px;left: 9px;width:1rem;height:1rem}.change-type label:after{    width: .55rem;height: .55rem;top: 18px;left: 11px;border-radius: 100%;}.change-type input:checked~label{color:#48b884;font-weight:600;box-shadow:0 4px 9px 0 rgba(104,105,128,.22)}.change-type input:checked~label:before{color:#fff;box-shadow:none;border:2px solid #48b884}.change-type input:checked~label:after{background:#55bd8d}';
                var styleNode = document.createElement('style');
                styleNode.innerHTML = css;
                document.body.appendChild(styleNode);
            }
            if (!window.__sample_change_chart_type_instansiated) {
                instantiate();
            }
            window.__sample_change_chart_type_instansiated = true;
        }
    }});// RenderchartInstance.render();

上图通过以下步骤呈现:

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

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

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

  • 将图表类型设置为column2d。

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

  • 将设置dataFormat为JSON。

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

4、beforeRender事件被称为从更新图表类型column2d到bar2d或pie2d。

5、在中创建单选按钮,

以便从以下图表中选择图表类型:


  • Column 2D

  • Bar 2D

  • Pie 2D

6、功能已添加到单选按钮,以在运行时更新图表类型。

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

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

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

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

JavaScript图表工具FusionCharts Suite XT入门教程(十):在运行时更改图表类型



标签:

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

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

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

FusionMaps XT

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

FusionCharts XT

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

FusionWidgets XT

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

PowerCharts XT

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

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