半岛外围网上直营

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：

点击下载AnyChart最新试用版

总览

AnyChart js图表库支持几种设置数据的方式。本文快速演示了在AnyChart组件中使用JSON格式的主要方面。本文的最后一个示例演示了具有高级设置的笛卡尔图表。有关其他设置数据方式的信息，请参见UData集和支持的数据格式。文。

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

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

架构图

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

JSON与JAVASCRIPT

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

// JSON data
var 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 chart
chart.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();

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 type
var chart = anychart.column();

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

"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正版授权的朋友可以