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

AnyChart現已更新至最新版本8.7.0，九大數據可視化新功能上線，改進了功能并修復了一些bug。新版本，新功能，趕快下載體驗吧~（點擊查看更新詳情）

點擊下載AnyChart最新試用版

數據集

這是允許您使用AnyChart中的數據集的類的列表：

• 數據集-anychart.data.Set
  

• 數據視圖-anychart.data.View
  

• 迭代器-anychart.data.Iterator

設定數據

AnyChart中的數據集定義為anychart.data.Set類的實例。

數據可以組織為數組數組，對象數組或CSV字符串（另請參見：CSV中的數據）。數據字段的選擇取決于圖表類型。

1.創建數據集。要創建數據集，請將數據傳遞給anychart.data.set（）方法：

var dataSet = anychart.data.set(data);

2.映射數據。如果將數據設置為數組數組或CSV字符串，則需要映射數據集。對于組織為對象數組的數據，映射是可選的。

調用mapAs（）方法，并將要創建的系列類型所需的字段名稱鏈接到數據中的列索引或字段名稱：

var mapping = dataSet.mapAs({x: 0, value: 1});
var mapping = dataSet.mapAs({x: "x", value: "value"});

3.創建系列。

最后一步是將映射傳遞到圖表或系列構造函數：

var chart = anychart.column();var series = chart.column(mapping);

如果數據以對象數組的形式組織，則可以將數據集直接傳遞到圖表或系列構造函數：

var chart = anychart.column();var series = chart.column(dataSet);

注意：但是，如果使用自定義數據字段，則需要重新映射它們。

數組

以下示例顯示了如何將數據組織為數組來設置數據：

// create data
data = [
  ["January", 12000],
  ["February", 15000],
  ["March", 16000],
  ["April", 14000],
  ["May", 10000]];
// create a data setvar dataSet = anychart.data.set(data);
// map the datavar mapping = dataSet.mapAs({x: 0, value: 1});
// create a chartvar chart = anychart.column();
// create a series and set the datavar series = chart.column(mapping);

對象數組

此示例顯示了如何將數據組織為一組對象來設置數據：

// create data
  var data = [
    {x:"January", value: 12000},
    {x:"February", value:  15000},
    {x:"March", value:  16000},
    {x:"April", value:  14000},
    {x:"May", value:  10000}
  ];
// create a data setvar dataSet = anychart.data.set(data);
// create a chartvar chart = anychart.column();
// create a series and set the datavar series = chart.column(data);

CSV字符串

下面的示例顯示了如何將數據組織為CSV字符串來進行設置。

默認情況下，AnyChart將CSV數據中的逗號視為列分隔符，將換行符視為行分隔符，但是anychart.data.set（）可以接受具有替代設置的對象作為第二個參數。

使用columnsSeparator和rowsSeparator字段設置分隔符，并ignoreFirstRow在需要時忽略數據的第一行。

// create datavar data = "x;value*" +
       "January;12000*" +
       "February;15000*" +
       "March;16000*" +
       "April;14000*" +
       "May;10000*";
// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};
// create a data setvar dataSet = anychart.data.set(data, csvSettings);
// map the datavar mapping = dataSet.mapAs({x: 0, value: 1});
// create a chartvar chart = anychart.column();
// create a series and set the datavar series = chart.column(mapping);

制圖

如果將數據設置為數組數組或CSV字符串，則需要映射 。

要映射的數據集，調用一舉成名（）上的一個實例方法anychart.data.Set。指定要創建的系列類型所需的字段名稱，并將其鏈接到數據中列的索引：

var mapping = dataSet.mapAs({x: 0, value: 1});

如果數據以對象數組的形式組織，則應將系列所需的字段名稱鏈接到數據中的字段名稱：

var mapping = dataSet.mapAs({x: "x", value: "value"});

請注意，在這種情況下，映射是可選的。但是，如果您的數據包含自定義字段，則需要重新映射。

在以下示例中，為多系列圖表的兩個系列創建兩個映射：

// create datavar data = [
  ["January", 12000, 10000],
  ["February", 15000, 12000],
  ["March", 16000, 18000],
  ["April", 14000, 11000],
  ["May", 10000, 9000]];
// create a data setvar dataSet = anychart.data.set(data);
// map the datavar mapping1 = dataSet.mapAs({x: 0, value: 1});var mapping2 = dataSet.mapAs({x: 0, value: 2});
// create a chartvar chart = anychart.column();
// create the first series and set the datavar series1 = chart.column(mapping1);
// create the second series and set the data  var series2 = chart.column(mapping2);

重新映射

如果您的數據以對象數組的形式組織并且包含自定義字段，則需要重新映射它。

調用mapAs() 的實例方法anychart.data.Set，指定由您要創建的系列類型所需的字段名，并將其鏈接到數據的自定義字段。

在此示例中，自定義字段month和sales被映射為Column系列所需的x和value字段：

// create datavar data = [
  {month:"January", sales: 12000},
  {month:"February", sales:  15000},
  {month:"March", sales:  16000},
  {month:"April", sales:  14000},
  {month:"May", sales:  10000}];
// create a data setvar dataSet = anychart.data.set(data);
// map the datavar mapping = dataSet.mapAs({x: "month", value: "sales"});
// create a chartvar chart = anychart.column();
// create a series and set the datavar series = chart.column(mapping);

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

想要購買Anychart正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼