跨平台图表控件AnyChart快速入门教程（十三）：表数据模型（上）

表数据模型将数据表示为行和列的集合，从而可以存储大型有序数据集。

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。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 datadataTable.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 datadataTable.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 settingscsvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};// create a data tablevar dataTable = anychart.data.table(0);// add datadataTable.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 datadataTable.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 datadataTable.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 indicatorchart.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 tabledataTable_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 tabledataTable_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正版授权的朋友可以咨询官方客服

标签：

来源：慧都