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();
从上面四种方法来看,无论开发人员选择哪一种,都可以快速并且简便地为图表指定数据源。