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

點擊下載AnyChart最新試用版

總覽

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

本文介紹了如何設置表數(shù)據(jù)，訪問行以及對數(shù)據(jù)執(zhí)行操作。

class

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

• 表-anychart.data.Table

• 映射-anychart.data.TableMapping

• 行選擇-anychart.data.TableSelectable

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

• 迭代器-anychart.data.TableIterator

• 計算機-anychart.data.TableComputer

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

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

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

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

1.創(chuàng)建數(shù)據(jù)表。第一步是使用anychart.data.table（）方法創(chuàng)建數(shù)據(jù)表-anychart.data.Table的實例。

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

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

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

dataTable.addData(data);

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

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的實例）傳遞給系列構(gòu)造函數(shù)：

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

數(shù)組

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

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

對象數(shù)組

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

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

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

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

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

// 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的實例。

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

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

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

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

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

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

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

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

在以下示例中，有兩個基于相同數(shù)據(jù)的系列，但是對于第一個，它使用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);

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

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

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

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