跨平台图表控件AnyChart快速入门教程（六）：支持的数据格式

本系列教程将为您介绍如何快速掌握AnyChart，本节专门介绍AnyChart支持的数据格式。

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、 表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>

AnyChart现已更新至最新版本8.7.0，九大数据可视化新功能上线，改进了功能并修复了一些bug。新版本，新功能，赶快下载体验吧~（点击查看更新详情）

AnyChart最新试用版

支持的数据格式

介绍

AnyChart图表库支持多种将数据设置为图表的方法。您可以选择最适合您的任务的一个：

• JavaScript API

• XML格式

• JSON格式

• CSV

• Google试算表

• HTML表格

每种方式都有其优点和缺点。我们建议使用JavaScript API-此选项通常是最灵活的，并且在AnyChart JavaScript图表文档和AnyChart JavaScript Charts API中将看到的大多数示例都使用此格式。

JAVASCRIPT API

当需要动态创建，读取，更新和删除数据点时，JavaScript API可以为您提供最佳帮助。

我们建议您在使用JavaScipt中的数据时使用数据集，但也可以将数据直接传递到图表：

// create a pie chartvar chart = anychart.pie([    ['Product A', 1222],    ['Product B', 2431],    ['Product C', 3624],    ['Product D', 5243],    ['Product E', 8813]]);// set container id for the chartchart.container('container');// initiate chart drawingchart.draw();

XML格式

如果您希望图表配置使用声明式样式，则可以选择XML格式。
另外，AnyChart的所有早期版本都是基于XML的，因此这种设置数据的方式可能是您已经习惯的方式。XML格式的完美性能要差一些，并且在定制方面不如JS API灵活。

// create an XML stringvar 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 chartchart.container('container');// initiate chart drawingchart.draw();

JSON格式

JSON基本上具有与XML格式相同的目的和缺点。JSON的性能不如JS API，并且灵活性也较差。

// create json datavar 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);// display a chartchart.container('container').draw();

CSV

当您需要最小化数据输入的大小时，CSV显然是最好的解决方案。它与其他任何格式一样易于使用，但是CSV也缺乏JS API的灵活性。

// create CSV stringvar csvString = '2009-02-05,6764.81n' +      '2009-02-07,7056.48n' +      '2009-02-18,7180.97n' +      '2009-02-26,7269.06n' +      '2009-02-25,7349.58n' +      '2009-02-24,7115.34n' +      '2009-02-23,7365.99n' +      '2009-02-20,7461.49n' +      '2009-02-19,7555.23';      // create an area chart      var chart = anychart.area();// create the area series based on CSV datachart.area(csvString);// display a chartchart.container('container').draw();

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

想要购买Anychart正版授权的朋友可以咨询官方客服。

标签：