翻譯|使用教程|編輯:吳園園|2019-10-08 13:29:47.843|閱讀 346 次
概述:本篇教程將為您介紹如何配置圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
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來制作專業(yè)的JavaScript圖表。
FusionCharts Suite XT現(xiàn)已更新至3.14.0-sr.1版本,F(xiàn)usionCharts Angular包裝器現(xiàn)在與Angular 8兼容并修復(fù)了一些bug。
點擊下載FusionCharts Suite XT最新試用版
使用Plain JS配置圖表
FusionCharts Suite XT包含高級功能,可讓您向圖表添加更多上下文并簡化數(shù)據(jù)可視化。這些功能包括圖表更新,注釋,趨勢線和事件。
本文重點介紹如何:
更新圖表數(shù)據(jù)
更新圖表屬性
更新圖表數(shù)據(jù)
下面顯示了配置為動態(tài)更新數(shù)據(jù)值的圖表(單擊“ 更新圖表數(shù)據(jù)以啟動”):

上面示例的完整代碼如下:
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();上圖通過以下步驟呈現(xiàn):
1、使用包括必要的庫和組件import。例如fusioncharts圖書館等
2、將圖表和主題添加為依賴項。
3、使用圖表選項創(chuàng)建圖表的實例。在JSON對象中:
將圖表類型設(shè)置為column2d。
設(shè)置圖表的寬度和高度(以像素為單位)。
將設(shè)置dataFormat為JSON。
將json數(shù)據(jù)嵌入為的值dataSource。
4、生成隨機數(shù)據(jù)以使用Math.random()更新圖表。
5、添加事件處理程序以更新圖表按鈕。
6、添加該updateData()功能以在單擊按鈕時隨機更新圖表的值。
7、添加,在innerHTML中創(chuàng)建button內(nèi)部
更新圖表屬性
下面顯示了配置為動態(tài)更新圖表標(biāo)題,子標(biāo)題對齊方式和圖表背景的圖表(單擊圖表下方顯示的任何一個按鈕可更改圖表背景和標(biāo)題,子標(biāo)題對齊方式):

上面示例的完整代碼如下:
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  ';
            str += 'Make Caption Text Left-Aligned  ';
            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、使用圖表選項創(chuàng)建圖表的實例。在JSON對象中:
將圖表類型設(shè)置為column2d。
設(shè)置圖表的寬度和高度(以像素為單位)。
將設(shè)置dataFormat為JSON。
將json數(shù)據(jù)嵌入為的值dataSource。
4、beforeRender 函數(shù)用于設(shè)置圖表屬性。
changeBackground 更新了圖表的背景。
makeCaptionLeft 將標(biāo)題文本設(shè)置為左對齊。
resetAttr 將圖表數(shù)據(jù)重置為其初始狀態(tài)。
5、btnContainer創(chuàng)建按鈕里面
6、調(diào)用該renderComplete函數(shù)以返回呈現(xiàn)的圖表。
=====================================================
想要了解或購買FusionCharts Suite XT正版授權(quán)的朋友歡迎咨詢
關(guān)注“慧聚IT”微信公眾號,及時獲取產(chǎn)品最新消息和最新資訊

本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: