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

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

點擊下載AnyChart最新試用版

數(shù)據(jù)集

這是允許您使用AnyChart中的數(shù)據(jù)集的類的列表：

• 數(shù)據(jù)集-anychart.data.Set
  

• 數(shù)據(jù)視圖-anychart.data.View
  

• 迭代器-anychart.data.Iterator

設定數(shù)據(jù)

AnyChart中的數(shù)據(jù)集定義為anychart.data.Set類的實例。

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

1.創(chuàng)建數(shù)據(jù)集。要創(chuàng)建數(shù)據(jù)集，請將數(shù)據(jù)傳遞給anychart.data.set（）方法：

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

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

調(diào)用mapAs（）方法，并將要創(chuàng)建的系列類型所需的字段名稱鏈接到數(shù)據(jù)中的列索引或字段名稱：

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

3.創(chuàng)建系列。

最后一步是將映射傳遞到圖表或系列構(gòu)造函數(shù)：

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

如果數(shù)據(jù)以對象數(shù)組的形式組織，則可以將數(shù)據(jù)集直接傳遞到圖表或系列構(gòu)造函數(shù)：

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

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

數(shù)組

以下示例顯示了如何將數(shù)據(jù)組織為數(shù)組來設置數(shù)據(jù)：

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

對象數(shù)組

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

// 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字符串

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

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

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

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

制圖

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

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

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

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

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

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

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

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

重新映射

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

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

在此示例中，自定義字段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正版授權(quán)的朋友可以。

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