跨平台图表控件AnyChart快速入门教程(十三):表数据模型(下)

翻译|使用教程|编辑:吴园园|2019-12-31 10:21:26.307|阅读 28 次

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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 points
var range = chart.getSelectedRange();

// get the values of the first and last point of the range
var 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 table
dataTable = anychart.data.table(0);

// add data
dataTable.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 data
mapping = dataTable.mapAs({low: 1, high: 2, fill: 3});

// create a stock chart
var chart = anychart.stock();
    
// create a plot and an ohlc series
var ohlcSeries = chart.plot(0).rangeColumn(mapping);

// update the first row
dataTable.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 object
and select rows corresponding to the shown points */
selectable = mapping.createSelectable();
selectable.select(range.firstSelected, range.lastSelected);

// get the iterator
var iterator = selectable.getIterator();

// display information about shown points in the table
while (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正版授权的朋友可以咨询慧都官方客服

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






标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Anychart

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
AnyChart

灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。

在线
客服
在线
QQ
咨询
电话
173-8239-2642
购物车 反馈 返回
顶部
在线客服系统
live chat