JavaScript图表工具FusionCharts Suite XT入门教程(四):配置图表

翻译|使用教程|编辑:吴园园|2019-10-08 13:29:47.843|阅读 50 次

概述:本篇教程将为您介绍如何配置图表。

相关链接:

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图表。

FusionCharts Suite XT现已更新至3.14.0-sr.1版本,FusionCharts Angular包装器现在与Angular 8兼容并修复了一些bug。

点击下载FusionCharts Suite XT最新试用版

使用Plain JS配置图表

FusionCharts Suite XT包含高级功能,可让您向图表添加更多上下文并简化数据可视化。这些功能包括图表更新,注释,趋势线和事件。

本文重点介绍如何:

  • 更新图表数据

  • 更新图表属性

更新图表数据

下面显示了配置为动态更新数据值的图表(单击“ 更新图表数据以启动”):

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",
  renderAt: "chart-container",
  width: "700",
  height: "400",
  dataFormat: "json",
  dataSource: {
    // Chart Configuration
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subCaption: "In MMbbl = One Million barrels",
      xAxisName: "Country",
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      theme: "fusion"
    },
    // Chart Data
    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(evt, args) {
      var controls = document.createElement("div"),
        chartRef = evt.sender;
      chartRef.getRandomNumber = function() {
        var max = 300,
          min = 50;
        return Math.round((max - min) * Math.random() + min);
      };
      updateData = function() {
        //clones data
        var data = Object.assign({}, chartRef.getJSONData());
        data.data[2].label = "Canada";
        data.data[2].value = chartRef.getRandomNumber();
        data.data[3].label = "Iran";
        data.data[3].value = chartRef.getRandomNumber();
        chartRef.setJSONData(data);
      };
      controls.innerHTML =
        'Update chart data';
      controls.style.cssText = "text-align: center; width: 100%;";
      args.container.appendChild(controls);
    }
  }}); // RenderchartInstance.render();

上图通过以下步骤呈现:

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

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

3、使用图表选项创建图表的实例。在JSON对象中:

  • 将图表类型设置为column2d。

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

  • 将设置dataFormat为JSON。

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

4、生成随机数据以使用Math.random()更新图表。

5、添加事件处理程序以更新图表按钮。

6、添加该updateData()功能以在单击按钮时随机更新图表的值。

7、添加,在innerHTML中创建button内部

更新图表属性

下面显示了配置为动态更新图表标题,子标题对齐方式和图表背景的图表(单击图表下方显示的任何一个按钮可更改图表背景和标题,子标题对齐方式):

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',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        // Chart Configuration
        "chart": {
            "caption": "Countries With Most Oil Reserves [2017-18]",
            "subCaption": "In MMbbl = One Million barrels",
            "xAxisName": "Country",
            "yAxisName": "Reserves (MMbbl)",
            "numberSuffix": "K",
            "theme": "fusion",
        },
        // Chart Data
        "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(evt, args) {
            var chartRef = evt.sender;
            chartRef.originalData = JSON.parse(JSON.stringify(chartRef.getJSONData()));
            chartRef.changeBackground = function() {
                var data = chartRef.getJSONData(); //copy of object
                data.chart.bgColor = '#efefef';
                chartRef.setJSONData(data);
            };
            // Resets all the chart data to it's initial verison
            chartRef.resetAttr = function() {
                chartRef.setJSONData(chartRef.originalData);
            };
            // Makes the caption text left aligned
            chartRef.makeCaptionLeft = function() {
                var data = chartRef.getJSONData();
                data.chart.captionAlignment = 'left';
                chartRef.setJSONData(data);
            };
            var btnContainer = document.createElement('div'),
                str;
            // buttons
            str = 'Change Chart Background&nbsp&nbsp';
            str += 'Make Caption Text Left-Aligned&nbsp&nbsp';
            str += 'Reset Attributes';
            btnContainer.style.cssText = "text-align: center; width: 100%; margin: 10px;";
            btnContainer.innerHTML = str;
            //button attachment
            args.container.parentNode.insertBefore(btnContainer, args.container.nextSibling);
        },
        "renderComplete": function(evt, args) {
            var chartRef = evt.sender,
                bgColorBtn = document.getElementById('bgColorBtn'),
                captionAlignBtn = document.getElementById('captionAlignBtn'),
                resetAttrBtn = document.getElementById('resetAttrBtn');
            bgColorBtn.onclick = chartRef.changeBackground;
            captionAlignBtn.onclick = chartRef.makeCaptionLeft;
            resetAttrBtn.onclick = chartRef.resetAttr;
        }
    }});// RenderchartInstance.render();

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

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

3、使用图表选项创建图表的实例。在JSON对象中:

  • 将图表类型设置为column2d。

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

  • 将设置dataFormat为JSON。

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

4、beforeRender 函数用于设置图表属性。

  • changeBackground 更新了图表的背景。

  • makeCaptionLeft 将标题文本设置为左对齐。

  • resetAttr 将图表数据重置为其初始状态。

5、btnContainer创建按钮里面

。使用将样式设置为按钮innerHTML。

6、调用该renderComplete函数以返回呈现的图表。

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

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

关注“慧聚IT”微信公众号,及时获取产品最新消息和最新资讯

图片2.jpg



标签:

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

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/configure-your-chart-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