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