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

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

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>

AnyChart最新试用版

访问行

行被定义为实例anychart.data.TableSelectable.RowProxy类，和选择作为实例anychart.data.TableSelectable。

如果要访问表的一行，则首先应创建一行选择，然后在此选择中搜索该行。换句话说，不能直接访问行。

操纵表数据通常需要访问行，因此在“ 数据操纵”部分的某些示例中使用了下面描述的方法-请参阅“ 搜索和迭代”。

1.创建选择。要访问一个选择的行，创建的一个实例anychart.data.TableSelectable通过调用createSelectable（）上的一个实例方法anychart.data.TableMapping：

selectable = mapping.createSelectable();

此方法创建一个包括所有行的选择。您可以将其范围缩小到您选择的日期范围 – 使用两个键（日期）作为参数调用select（），可以将其作为数字，字符串或Date对象传递：

selectable.select("2002-01-01", "2006-01-01");

另外，有时允许您选择所有日期的selectAll（）方法可能会有所帮助。请注意，这两个方法都返回anychart.data.TableSelectable的实例。

您可以使用两个可选参数调用select（）和selectAll（），以对所选数据进行分组，例如在“ 迭代”部分的第二个示例中。其中一个参数设置时间间隔，例如一天，一个月，一年等（请参阅anychart.enums.Interval），另一个参数设置间隔的数量：

2.访问行。要访问选择中表的一行，请对该行的键执行搜索 – 在anychart.data.TableSelectable实例上调用search（）方法：

selectable = mapping.createSelectable();selectable.select("2002-01-01", "2006-01-01");selectable.search("2004-01-01", "exact");

数据处理

您可以执行以下数据操作：

• Reading
• Searching
• Adding
• Updating
• Removing
• Iterating

阅读

要读取数据，请使用anychart.data.TableSelectable.RowProxy的方法：

• get（） -接受数据字段的名称，返回其值
• getColumn（） -接受列的索引，返回值
• getIndex（） -返回行的索引
• getKey（） -返回行的键（日期）

要调用上面列出的方法，您需要访问表的一行，这需要创建一行选择并执行搜索

正在搜寻

要查找行，请访问选定的行（anychart.data.TableSelectable），并以该行的键（日期）作为第一个参数调用search（）。此方法返回anychart.data.TableSelectable.RowProxy的实例。

第二个参数设置搜索模式 -请参见anychart.enums.TableSearchMode：

• “exact”
• “exact-or-next”
• “exact-or-prev”
• “nearest”

在以下示例中，有关所显示范围的第一个和最后一个点的信息显示在图表标题中，并且当更改范围时，说明也会更新。该搜索（）方法结合的get（）和getColumn（）方法允许读取数据：

// get the shown range of pointsvar range = chart.getSelectedRange();// get the values of the first and last point of the rangevar firstPoint = selectable.search(range.firstSelected, "nearest");var lastPoint = selectable.search(range.lastSelected, "nearest");var firstDate = firstPoint.getColumn(0);var firstLow = firstPoint.get("low");var firstHigh = firstPoint.get("high");var lastDate = lastPoint.getColumn(0);var lastLow = lastPoint.get("low");var lastHigh = lastPoint.get("high");

新增行

该addData的方法anychart.data.Table是不仅用于设定数据，而且还用于将行-只是传递的新的行作为一个参数的数组：

dataTable.addData([  ["2016-01-01", 511.32, 514.29, 505.99, 506.37],  ["2016-01-02", 511.70, 514.87, 506.18, 506.75]]);

还有一个可选的第二个参数用于流数据-它允许您从存储的开头删除已经存在的行。您可以指定要删除的行数，也可以指定true删除要添加的行数。

请记住，新数据应与映射相对应。可以传递具有其他设置的行，这些设置不会出现在原始数据集中（例如，自定义填充或笔触颜色），但是有必要在映射中包括相应的字段：

var mapping = dataTable.mapAs(  {open: 1, high: 2, low: 3, close: 4, risingStroke: 5, fallingStroke: 5});dataTable.addData([  ["2016-01-01", 511.32, 514.29, 505.99, 506.37, "4 #00838f"],]);

注意：可以添加具有任何日期的行。例如，可以在两个旧行之间插入新行或重写旧行

在此示例中，当您按下按钮时，随机数据将添加到表中并显示在图表上：

对此产品有疑问，欢迎咨询在线客服

更新行

该addData的方法anychart.data.Table是不仅用于设置和添加数据，也用于更新它。这意味着，当您调用此方法时，可以指定数据中已经包含的日期，并为其设置新值。

表中的数据更新后，所有映射都会自动更新。始终确保您正在更新正确的列。另外，请注意，可以传递带有未在原始数据集中显示的其他设置的行（例如，自定义填充或描边颜色），但是有必要在映射中包括相应的字段。

这是更新表数据的样子：

// create a data tabledataTable = anychart.data.table(0);// add datadataTable.addData([  ["2015-12-25", 506.69, 511.88],  ["2015-12-26", 507.59, 514.98],  ["2015-12-27", 505.49, 516.30],  ["2015-12-28", 506.23, 514.72],  ["2015-12-29", 505.38, 517.86],  ["2015-12-30", 506.66, 516.98],  ["2015-12-31", 505.99, 513.33],  ["2016-01-01", 507.99, 515.29],  ["2016-01-02", 506.18, 514.87]]);// map the datamapping = dataTable.mapAs({low: 1, high: 2, fill: 3});// create a stock chartvar chart = anychart.stock(); // create a plot and an ohlc seriesvar ohlcSeries = chart.plot(0).rangeColumn(mapping);// update the first rowdataTable.addData([["2015-12-25", 510.69, 516.88," #dd2c00"]]);

在以下示例中，输入自定义参数后，表的第一行即刻更新。

拆除行

要删除一定范围的行，请使用两个键（日期）作为参数调用anychart.data.Table的remove（）方法-它们可以作为数字，字符串或Date对象传递：

dataTable.remove("2015-12-28", "2015-12-31");  

removeFirst（）方法，可以去除第一n行（默认1）：

dataTable.removeFirst(1); 

反复进行

• advance（） -将迭代器前进到下一行

• get（） -返回给定字段中当前行的值

• getIndex（） -返回当前行的索引

• getKey（） -返回当前行的键

• reset（） -将迭代器重置为第一项之前的默认位置

迭代是遍历树中所有项目的过程。您可以一对一地访问它们，但是AnyChart提供了一种更简便，更快速的即用型解决方案。

要遍历表，首先访问行的选择-创建anychart.data.TableSelectable的实例（请参见访问行）。然后，对其调用getIterator（）以获取anychart.data.TableIterator对象。

最后，调用迭代器的方法：

在advance（），getKey（）和get（）方法下面的示例中，用于显示有关落入图表所示范围内的所有点的信息。更改范围后，说明将更新。

/* create the selectable objectand select rows corresponding to the shown points */selectable = mapping.createSelectable();selectable.select(range.firstSelected, range.lastSelected);// get the iteratorvar iterator = selectable.getIterator();// display information about shown points in the tablewhile (iterator.advance()) {  var key = iterator.getKey();  var date = anychart.format.dateTime(key, "dd.MM.yyyy");  var low = iterator.get("low");  var high = iterator.get("high"); }

在下一个示例中，所选数据按两年分组

/* create the selectable object,select rows corresponding to the shown points, and group them */selectable = mapping.createSelectable();selectable.select(range.firstSelected, range.lastSelected, "year", 2);

迭代器用于显示有关分组数据的信息，这些数据属于图表所示的点范围：

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

想要购买Anychart正版授权的朋友可以咨询官方客服

关注下方微信公众号，及时获取产品最新消息和最新资讯

标签：

来源：慧都