AnyChart如何使用多种数据源

作者:控件中国网   出处:控件中国网   2015-06-02 09:39:47   阅读:10

AnyChart7.x是一款全完基于JavaScript和HTML5的多功能图表和仪表控件,兼容和支持多种浏览器,完全的跨平台,支持多种图表类型:柱状图、线性图、折线图、步线图、迷你图、区域图、列图、分散图、圆形仪表、箱型图、饼图和圈图、雷达图、极地图、组合图、错误图等,控件提供丰富的JavascriptAPI可以快速帮助开发人员构建现代化商业智能程序。

AnyChart 7.x支持四种数据格式输入,JavaScript API、XML、JSON、CSV开发人员可以随意选择自己喜欢的数据格式,下面咱们简单介绍如何使用这四种数据格式:

1.AnyChart使用JavaScript API进行图表数据源的输入,具体代码如下:
// create a pie chart
var chart = AnyChart.pieChart([
    ['Product A', 1222],
    ['Product B', 2431],
    ['Product C', 3624],
    ['Product D', 5243],
    ['Product E', 8813]
]);
 
// set container id for the chart
chart.container('container');
 
// initiate chart drawing
chart.draw();

2. 使用XML作为图表数据源输入,具体代码如下:
var xmlString = '<xml>' +
                '<chart type="pie" >' +
                  '<data>' +
                    '<point name="Product A" value="1222"/>' +
                    '<point name="Product B" value="2431"/>' +
                    '<point name="Product C" value="3624"/>' +
                    '<point name="Product D" value="5243"/>' +
                    '<point name="Product E" value="8813"/>' +
                  '</data>' +
                '</chart>' +
              '</xml>';
              
// create a chart from xml config             
var chart = AnyChart.fromXml(xmlString);
 
// set container id for the chart
chart.container('container');
 
// initiate chart drawing
chart.draw();

3. 使用JSON作为图表数据源输入,具体代码如下:
var json = {
    "chart": {
        "type": "pie",
        "data": [
            ["Product A", 1222],
            ["Product B", 2431],
            ["Product C", 3624],
            ["Product D", 5243],
            ["Product E", 8813]
        ]
    }
};
 
// create chart from json config             
var chart = AnyChart.fromJson(json);
 
// set container id for the chart
chart.container('container');
 
// initiate chart drawing
chart.draw();
4. 使用CSV作为数据源输入,具体代码如下:

// create CSV string
var csvString = '2009-02-05,6764.81\n' +
      '2009-02-07,7056.48\n' +
      '2009-02-18,7180.97\n' +
      '2009-02-26,7269.06\n' +
      '2009-02-25,7349.58\n' +
      '2009-02-24,7115.34\n' +
      '2009-02-23,7365.99\n' +
      '2009-02-20,7461.49\n' +
      '2009-02-19,7555.23';
      
// create an area chart     
var chart = AnyChart.areaChart();
 
// set container id for the chart
chart.container('container');
 
// create the area series based on CSV data
chart.area(csvString);
 
// initiate chart drawing
chart.draw();

从上面四种方法来看,无论开发人员选择哪一种,都可以快速并且简便地为图表指定数据源。

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat