跨平台图表控件AnyChart快速入门教程（十四）：从JSON中获取数据（上）

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

AnyChart最新试用版

总览

您还可以按照数据适配器中的说明使用数据适配器从文件加载JSON设置。

JSON或JavaScript Object Notation是一种开放标准格式，使用人类可读的文本来传输由属性值对组成的数据对象。它主要用于在服务器和Web应用程序之间传输数据，以替代XML。有关更多信息，请访问https://en.wikipedia.org/wiki/JSON

架构图

JSON模式指定了一种基于JSON的格式来定义JSON数据的结构（有关更多信息，请访问https://en.wikipedia.org/wiki/JSON#Schema_and_metadata）。此架构的所有对象均对应于JavaScript方法和图表参数。AnyChart JSON模式因版本而异。例如，AnyChart版本8.7.1的JSON模式位于https://cdn.anychart.com/schemas/8.7.1/json-schema.json。每当使用AnyChart JSON模式时，请确保其对应于AnyChart的版本。

JSON与JAVASCRIPT

要以JSON格式加载图表配置，应使用fromJson（）方法。使用JSON格式设置数据与JavaScript中设置数据的方式非常相似。JSON配置中每个对象的名称都与JavaScript中的方法或参数的名称相对应。下面的代码段演示了简单图表的配置。

// JSON datavar json = {  // chart settings  "chart": {    // chart type    "type": "pie",    // chart data    "data": [      {"x": "Apples", "value": "128.14", fill: "green"},      {"x": "Oranges", "value": "128.14", fill: "orange"},    ],    // chart container    "container": "container"  }};var chart = anychart.fromJson(json);// draw chartchart.draw();

此配置创建如下图所示的图表

注意：饼图只能有一个数据系列，因此饼图的JSON配置不需要“系列”对象。

JSON配置可以包含字符串，对象，数组，数字，布尔值和null。各种可接受的数据格式使AnyChart JSON结构与JavaScript配置非常相似。要查找任何必需的方法或参数，请使用AnyChart API。API描述了如何使用每种方法和参数。JSON配置的结构几乎相同。例如，您可以在API中找到column（）方法来创建柱形图。

var chart = anychart.column([128.14, 112.61, 163.21, 229.98]);chart.container('container');chart.draw();

可以使用JSON创建相同的图表

var chart = anychart.fromJson({  "chart": {    "type": "column",    "series":[{      "data": [128.14, 112.61, 163.21, 229.98],    }],    "container": "container"  }});chart.draw();

如您所见，JSON格式不仅限于设置图表类型及其数据，还可以为图表设置容器。

另一个示例：Y-Scale是使用yScale（）方法配置的，在JavaScript中，您可以使用如下代码：

// set chart typevar chart = anychart.column();chart.yScale()    // adjust y scale  .minimum(100)   // set minimum value  .maximum(350);  // set maximum value

并以JSON格式显示

"chart": {          // create chart  "type": "column", // set column type  "yScale": {       // invoke y scale    "minimum": 100, // set minimum value    "maximum": 350  // set maximum value  }}

序列化
JavaScript格式的预定义设置可以序列化为JSON格式。方法toJson（）将当前的图表设置传输到JSON对象中。此方法创建一个包含所有图表设置的对象，可用于存储图表数据和配置，但是请注意，当在JavaScript代码中重新定义标签或工具提示文本格式设置功能时-无法序列化。

多个系列

JSON数据集可以包含一个或多个系列-几乎与您在JavaScript中执行此操作的方式相同。下面的示例演示了来自JSON的多个系列的图表。

// series settings"series": [{  // first series data  "data": [    {"x": "P1", "value": "128.14"},    {"x": "P2", "value": "112.61"},    {"x": "P3", "value": "163.21"},    {"x": "P4", "value": "229.98"},    {"x": "P5", "value": "90.54"}  ]},{  // second series data  "data": [    {"x": "P1", "value": "90.54"},    {"x": "P2", "value": "104.19"},    {"x": "P3", "value": "150.67"},    {"x": "P4", "value": "120.43"},    {"x": "P5", "value": "200.34"}  ]}]

这是具有多个系列的示例：

设定值
轴数

来自JSON的数据可以包含所有可能的设置，用于控制图表 格，轴线以及刻度线和标签，轴比例和其他视觉外观设置。下面的示例演示设置轴名称和调整刻度方向。

// x axes settings"xAxes": [{               // settings for default x axis  "orientation": "top",   // set axis position  "title":{               // settings for axis title    "enabled": false      // disable title  }}],// y axes settings"yAxes": [{               // settings for default y axis  "orientation": "right", // set axis position  "title":{               // settings for axis title    "enabled": false      // disable title  }}],// y scale settings"yScale": {  "inverted": true        // enable y scale inversion

这是具有调整后的轴的示例：

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

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