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

點擊下載AnyChart最新試用版

總覽

表數據模型將數據表示為行和列的集合，從而可以存儲大型有序數據集。

本文介紹了如何設置表數據，訪問行以及對數據執行操作。

class

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

• 表-anychart.data.Table

• 映射-anychart.data.TableMapping

• 行選擇-anychart.data.TableSelectable

• 表格行-anychart.data.TableSelectable.RowProxy

• 迭代器-anychart.data.TableIterator

• 計算機-anychart.data.TableComputer

• 計算機行-anychart.data.TableComputer.RowProxy

您可以在以下各節中學習如何使用這些類。

設定數據

Anychart中的表數據結構被定義為anychart.data.Table類的實例。表數據可以組織為數組數組，對象數組或CSV字符串（另請參見：CSV中的數據）。要基于這種類型的數據創建圖表，您應該創建一個數據表，添加數據并映射該表。

1.創建數據表。第一步是使用anychart.data.table（）方法創建數據表-anychart.data.Table的實例。

如果將數據設置為數組數組或CSV字符串，請指定包含表鍵（日期）的列的索引作為參數（默認為0）。如果您將數據組織為對象數組，請指定包含表鍵的字段的名稱。您還可以使用可選參數來設置鍵列的日期/時間模式，時間偏移，基準日期和語言環境。

var dataTable = anychart.data.table(0);
var dataTable = anychart.data.table("x");

2.添加數據。下一步是調用addData（）方法以將數據傳遞到表。請注意，此方法也用于添加和更新數據。

dataTable.addData(data);

3.映射數據和創建系列。最后，調用一舉成名（）來映射表-鏈接由您要創建的列或在您的數據字段的名稱的指標系列的類型所需的數據字段的名稱。

var mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
var mapping = dataTable.mapAs({open: "open", high: "high", low: "low", close: "close"});

然后將映射（定義為anychart.data.TableMapping的實例）傳遞給系列構造函數：

var chart = anychart.stock();
var ohlcSeries = chart.plot(0).ohlc(mapping);

數組

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

// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData([
  ["2015-12-25", 512.53, 514.88, 505.69, 507.34],
  ["2015-12-26", 511.83, 514.98, 505.59, 506.23],
  ["2015-12-27", 511.22, 515.30, 505.49, 506.47],
  ["2015-12-28", 510.35, 515.72, 505.23, 505.80],
  ["2015-12-29", 510.53, 515.86, 505.38, 508.25],
  ["2015-12-30", 511.43, 515.98, 505.66, 507.45],
  ["2015-12-31", 511.50, 515.33, 505.99, 507.98],
  ["2016-01-01", 511.32, 514.29, 505.99, 506.37],
  ["2016-01-02", 511.70, 514.87, 506.18, 506.75]]);
// map the datavar mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
// create a stock chartvar chart = anychart.stock();
// create a plot and an ohlc seriesvar ohlcSeries = chart.plot(0).ohlc(mapping);

對象數組

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

 create a data tablevar dataTable = anychart.data.table("x");
// add data
dataTable.addData([
  {"x": "2015-12-25", "open": 512.53, "high": 514.88, "low": 505.69, "close": 507.34},
  {"x": "2015-12-26", "open": 511.83, "high": 514.98, "low": 505.59, "close": 506.23},
  {"x": "2015-12-27", "open": 511.22, "high": 515.30, "low": 505.49, "close": 506.47},
  {"x": "2015-12-28", "open": 510.35, "high": 515.72, "low": 505.23, "close": 505.80},
  {"x": "2015-12-29", "open": 510.53, "high": 515.86, "low": 505.38, "close": 508.25},
  {"x": "2015-12-30", "open": 511.43, "high": 515.98, "low": 505.66, "close": 507.45},
  {"x": "2015-12-31", "open": 511.50, "high": 515.33, "low": 505.99, "close": 507.98},
  {"x": "2016-01-01", "open": 511.32, "high": 514.29, "low": 505.99, "close": 506.37},
  {"x": "2016-01-02", "open": 511.70, "high": 514.87, "low": 506.18, "close": 506.75}]);
// map the datavar mapping = dataTable.mapAs({open: "open", high: "high", low: "low", close: "close"});
// create a stock chartvar chart = anychart.stock();
// create a plot and an ohlc seriesvar ohlcSeries = chart.plot(0).ohlc(mapping);

CSV字符串

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

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

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

// create datavar data = "Dates;Open;High;Low;Close*" +
           "2015-12-25;512.53;514.88;505.69;507.34*" +
           "2015-12-26;511.83;514.98;505.59;506.23*" +
           "2015-12-27;511.22;515.30;505.49;506.47*" +
           "2015-12-28;510.35;515.72;505.23;505.80*" +
           "2015-12-29;510.53;515.86;505.38;508.25*" +
           "2015-12-30;511.43;515.98;505.66;507.45*" +
           "2015-12-31;511.50;515.33;505.99;507.98*" +
           "2016-01-01;511.32;514.29;505.99;506.37*" +
           "2016-01-02;511.70;514.87;506.18;506.75";
// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};
// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData(data, null, csvSettings);
// map the datavar mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
// create a stock chartvar chart = anychart.stock();
// create a plot and an ohlc seriesvar ohlcSeries = chart.plot(0).ohlc(mapping);
ohlcSeries.name("ACME Corp.");

制圖

映射定義為anychart.data.TableMapping的實例。

要映射數據，調用一舉成名（）上的一個實例方法anychart.data.Table。指定由您要創建的系列類型所需的字段名，要么將它們鏈接到列的索引，或者在數據字段，這取決于它是否被組織成一個名稱數組的數組，對象數組或CSV字符串：

dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
dataTable.mapAs({open: "open", high: "high", low: "low", close: "close"});

注意：使用anychart.data.table（）方法創建表時，將指定帶有鍵（日期）的列。您不能使用mapAs（）重新映射鍵列。

您還可以設置近似模式的分組數據 -可用選項中列出anychart.enums.AggregationType。例如，這是將第一列的近似模式設置為的方式"open"：

dataTable.mapAs({open: {column: 1, type: "open"}, high: 2, low: 3, close: 4});

有將數據映射的另一種方法：call mapAs（）不帶參數，然后調用激活addField（）上的實例anychart.data.TableMapping。使用兩個參數：字段名稱和數據中列的索引/字段名稱。第三個參數（可選）允許您設置近似模式：

mapping.addField("open", 1, "open");

請注意，addField（）一次僅映射一個字段。

在以下示例中，有兩個基于相同數據的系列，但是對于第一個，它使用mapAs（）映射，而對于第二個則用addField（）映射：

// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData([
  ["2015-12-25", 512.53, 514.88, 505.69, 507.34],
  ["2015-12-26", 511.83, 514.98, 505.59, 506.23],
  ["2015-12-27", 511.22, 515.30, 505.49, 506.47],
  ["2015-12-28", 510.35, 515.72, 505.23, 505.80],
  ["2015-12-29", 510.53, 515.86, 505.38, 508.25],
  ["2015-12-30", 511.43, 515.98, 505.66, 507.45],
  ["2015-12-31", 511.50, 515.33, 505.99, 507.98],
  ["2016-01-01", 511.32, 514.29, 505.99, 506.37],
  ["2016-01-02", 511.70, 514.87, 506.18, 506.75]]);
// map the data for the first seriesvar mapping_1 = dataTable.mapAs({open: {column: 1, type: "open"}, high: 2, low: 3, close: 4});
// map the data for the second seriesvar mapping_2 = dataTable.mapAs();
mapping_2.addField("open", 1, "open");
mapping_2.addField("high", 2);
mapping_2.addField("low", 3);
mapping_2.addField("close", 4);
// create a stock chartvar chart = anychart.stock();
// create the first plot and ohlc seriesvar ohlc_1 = chart.plot(0).ohlc(mapping_1);
// create the second plot and ohlc seriesvar ohlc_2 = chart.plot(1).ohlc(mapping_2);

此樣本顯示如何映射多個系列和技術指標的數據：

// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData([
  ["2015-12-25", 512.53, 514.88, 505.69, 507.34],
  ["2015-12-26", 511.83, 514.98, 505.59, 506.23],
  ["2015-12-27", 511.22, 515.30, 505.49, 506.47],
  ["2015-12-28", 510.35, 515.72, 505.23, 505.80],
  ["2015-12-29", 510.53, 515.86, 505.38, 508.25],
  ["2015-12-30", 511.43, 515.98, 505.66, 507.45],
  ["2015-12-31", 511.50, 515.33, 505.99, 507.98],
  ["2016-01-01", 511.32, 514.29, 505.99, 506.37],
  ["2016-01-02", 511.70, 514.87, 506.18, 506.75]]);
// map the data for the frist seriesvar mapping_1 = dataTable.mapAs({value: 1});
// map the data for the second seriesvar mapping_2 = dataTable.mapAs({value: 4});
// map the data for the tecnical indicatorvar mapping_3 = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
// create a stock chartvar chart = anychart.stock();
// create the first plot and and two line seriesvar line_1 = chart.plot(0).line(mapping_1);var line_2 = chart.plot(0).line(mapping_2);
// create the second plot and a williams %r indicator
chart.plot(1).yScale().minimum(-100);
chart.plot(1).yScale().maximum(0);
chart.plot(1).williamsR(mapping_3, 4, "marker");

您還可以映射多個表。這里使用多個表格來顯示不同系列的奇數和偶數天：

// create two data tablesvar dataTable_1 = anychart.data.table(0);var dataTable_2 = anychart.data.table(0);
// add data to the first table
dataTable_1.addData([
  ["2018-01-01", 512.53],
  ["2018-01-03", 511.22],
  ["2018-01-05", 510.53],
  ["2018-01-07", 511.50],
  ["2018-01-09", 511.70]]);
// add data to the second table
dataTable_2.addData([
  ["2018-01-02", 511.83],
  ["2018-01-04", 510.35],
  ["2018-01-06", 511.43],
  ["2018-01-08", 511.32]]);
// map the first tablevar mapping_1 = dataTable_1.mapAs({value: 1});
// map the second tablevar mapping_2 = dataTable_2.mapAs({value: 1});
// create a stock chartvar chart = anychart.stock();
// create a plot and an two column seriesvar column_1 = chart.plot(0).column(mapping_1);var column_2 = chart.plot(0).column(mapping_2);

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

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