AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。重要推薦：

點(diǎn)擊下載AnyChart最新試用版

總覽

AnyChart js圖表庫支持幾種設(shè)置數(shù)據(jù)的方式。本文快速演示了在AnyChart組件中使用JSON格式的主要方面。本文的最后一個示例演示了具有高級設(shè)置的笛卡爾圖表。有關(guān)其他設(shè)置數(shù)據(jù)方式的信息，請參見UData集和支持的數(shù)據(jù)格式。文。

您還可以按照數(shù)據(jù)適配器中的說明使用數(shù)據(jù)適配器從文件加載JSON設(shè)置。

JSON或JavaScript Object Notation是一種開放標(biāo)準(zhǔn)格式，使用人類可讀的文本來傳輸由屬性值對組成的數(shù)據(jù)對象。它主要用于在服務(wù)器和Web應(yīng)用程序之間傳輸數(shù)據(jù)，以替代XML。有關(guān)更多信息，請訪問//en.wikipedia.org/wiki/JSON

架構(gòu)圖

JSON模式指定了一種基于JSON的格式來定義JSON數(shù)據(jù)的結(jié)構(gòu)（有關(guān)更多信息，請訪問//en.wikipedia.org/wiki/JSON#Schema_and_metadata）。此架構(gòu)的所有對象均對應(yīng)于JavaScript方法和圖表參數(shù)。AnyChart JSON模式因版本而異。例如，AnyChart版本8.7.1的JSON模式位于//cdn.anychart.com/schemas/8.7.1/json-schema.json。每當(dāng)使用AnyChart JSON模式時，請確保其對應(yīng)于AnyChart的版本。

JSON與JAVASCRIPT

要以JSON格式加載圖表配置，應(yīng)使用fromJson（）方法。使用JSON格式設(shè)置數(shù)據(jù)與JavaScript中設(shè)置數(shù)據(jù)的方式非常相似。JSON配置中每個對象的名稱都與JavaScript中的方法或參數(shù)的名稱相對應(yīng)。下面的代碼段演示了簡單圖表的配置。

// 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();

注意：餅圖只能有一個數(shù)據(jù)系列，因此餅圖的JSON配置不需要“系列”對象。

JSON配置可以包含字符串，對象，數(shù)組，數(shù)字，布爾值和null。各種可接受的數(shù)據(jù)格式使AnyChart JSON結(jié)構(gòu)與JavaScript配置非常相似。要查找任何必需的方法或參數(shù)，請使用AnyChart API。API描述了如何使用每種方法和參數(shù)。JSON配置的結(jié)構(gòu)幾乎相同。例如，您可以在API中找到column（）方法來創(chuàng)建柱形圖。

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格式不僅限于設(shè)置圖表類型及其數(shù)據(jù)，還可以為圖表設(shè)置容器。

另一個示例：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格式的預(yù)定義設(shè)置可以序列化為JSON格式。方法toJson（）將當(dāng)前的圖表設(shè)置傳輸?shù)絁SON對象中。此方法創(chuàng)建一個包含所有圖表設(shè)置的對象，可用于存儲圖表數(shù)據(jù)和配置，但是請注意，當(dāng)在JavaScript代碼中重新定義標(biāo)簽或工具提示文本格式設(shè)置功能時-無法序列化。

多個系列

JSON數(shù)據(jù)集可以包含一個或多個系列-幾乎與您在JavaScript中執(zhí)行此操作的方式相同。下面的示例演示了來自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"}
  ]
}]

設(shè)定值
軸數(shù)

來自JSON的數(shù)據(jù)可以包含所有可能的設(shè)置，用于控制圖表網(wǎng)格，軸線以及刻度線和標(biāo)簽，軸比例和其他視覺外觀設(shè)置。下面的示例演示設(shè)置軸名稱和調(diào)整刻度方向。

// 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正版授權(quán)的朋友可以