彩票走势图

跨平台图表控件AnyChart快速入门教程(九):数据集(下)

翻译|使用教程|编辑:吴园园|2019-11-19 10:32:02.667|阅读 239 次

概述:本系列教程将为您介绍如何快速掌握AnyChart,本文介绍了如何创建数据集并对其执行操作。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件,可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用,可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐:

AnyChart现已更新至最新版本8.7.0,九大数据可视化新功能上线,改进了功能并修复了一些bug。新版本,新功能,赶快下载体验吧~(点击查看更新详情

点击下载AnyChart最新试用版

访问行

数据集的行没有自己的类,因此无法直接访问它们。但是,您可以读取整行或给定数据字段中的值。另外,您可以搜索行并迭代数据。

数据处理

要读取数据,请使用以下方法:

  • getRowsCount() -返回数据集中的行数
  • row() -接受一行的索引,

  • 返回该行get() -接受行的索引和字段的名称,返回值

在下面的示例中,getRowsCount()和get()用于获取图表最后一点的参数和值:

跨平台图表控件AnyChart快速入门教程(九):数据集(下)

// get the argument and value of the last point
var rowsCount = dataSet.getRowsCount();
var lastPointName = mapping.get(rowsCount - 1, "x");
var lastPointValue = mapping.get(rowsCount - 1, "value");

新增行

您可以在数据中添加或插入行。新行可以组织为对象或数组-最佳实践是使用与原始数据集中相同的数据格式。

要添加一行或几行,请在anychart.data.Set实例上调用append()方法,并将行作为参数传递。新行总是添加在数据集的末尾。

dataSet.append(["New Point 1", 16000],
        ["New Point 2", 15000]);
dataSet.append({"x": "New Point 1", "value": 16000},
        {"x": "New Point 2", "value": 15000});

要插入一行,请调用insert()并传递两个参数:一行和一个索引,该索引指示数据集中您要放置该行的位置。

默认索引为0:如果未指定索引,则在数据集的开头插入行。负索引从数据集的末尾开始倒计数。

dataSet.insert(["New Point", 16000], -1);
dataSet.insert({"x": "New Point", "value": 16000}, -1);

如果将行添加或插入为数组,则新数据应对应于映射。可以传递具有其他设置的行,这些设置不会出现在原始数据集中(例如,自定义填充或笔触颜色),但是有必要在映射中包括相应的字段:

var mapping = dataSet.mapAs({x: 0, value: 1, fill: 2});
dataSet.append(["New Point 1", 16000, "#ef6c00"]);
dataSet.insert(["New Point 2", 15000, "#00bfa5"]);

在示例中,有两个按钮允许您添加或插入随机数据行。在插入行之前,您可以指定其位置(索引)。

更新

您可以更新整行或仅更新特定字段中的值。

要更新行,请使用row()方法。将行的索引作为第一个参数,将新行作为第二个参数。

可以将新行组织为一个对象或数组-最佳实践是使用与原始数据集中相同的数据格式。

dataSet.row(0, ["New Name", 16000]);
dataSet.row(0, {"x": "New Name", "value": 16000});

如果将新行设置为数组,则它应对应于映射。可以传递带有未在原始数据集中显示的其他设置的行(例如,自定义填充或笔触颜色),但是有必要在映射中包括相应的字段:

var mapping = dataSet.mapAs({x: 0, value: 1, fill: 2});
dataSet.row(0, ["New Name", 16000, "#ef6c00"]);

在此示例中,输入自定义参数后,将即时更新数据集的第一行

要更新值,请使用三个参数调用set()方法:

  • 行的索引

  • 字段名称

  • 新价值

mapping = dataSet.mapAs({x: 0, value: 1, fill: 2, stroke: 2});
mapping.set(0, "x", "New Name");
mapping.set(0, "value", 16000);
mapping.set(0, "fill", "#ef6c00");
mapping.set(0, "stroke", "#ef6c00");

拆除

要删除行,请以该行的索引作为参数调用anychart.data.Set的remove()方法。

下面的示例显示如何删除最后一行。它的索引是借助getRowsCount()方法计算得出的,该方法用于获取总行数:

dataSet.remove(dataSet.getRowsCount() - 1);

正在搜寻

要搜索数据行,请使用以下方法:

  • find()

  • filter()

find()

find()方法返回包含一个给定的值的行的索引。它接受两个参数:数据字段的名称和值。

在下面的示例中,此方法用于通过其参数选择点:

// find a row
var index = mapping.find("x", "April");
// select a row
series.select(index);

filter()

所述filter()方法的发现数据行与值满足给定条件。第一个参数是数据字段的名称,第二个参数是过滤器函数,该函数接受一个值并返回true或false。

使用此方法设置高级搜索条件–例如,查找值大于或小于给定值的所有行,如以下示例中所示:

// remove points with values less than a given onefunction filterValue() {
  var input = document.getElementById("valueInput").value;
  var newMapping = mapping.filter("value", function(value) {
    return value >= input;
  });
  series.data(newMapping);}

迭代

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

要遍历数据集,请通过调用getIterator()方法获取anychart.data.Iterator对象。然后我们使用迭代器的方法:

  • advance() -将迭代器前进到下一行

  • get() -返回给定字段中当前行的值

  • getIndex() -返回当前行的索引

  • getRowsCount() -返回总行数

  • meta() -设置/获取给定字段中当前行的元值

  • reset() -将迭代器重置为其第一行之前的默认位置

  • select() -将迭代器移动到具有给定索引的行

在此示例中,迭代器用于选择过滤点,查找其参数并在图表标题中显示它们:

// search for points with values equal or greater than a given onevar input = document.getElementById("valueInput").value;var newMapping = mapping.filter("value", function(value) {
  return value >= input;});
// get the iteratorvar iterator = newMapping.getIterator();
// select the points and get their argumentsvar pointNames = [];while (iterator.advance()) {
  var name = iterator.get("x");
  var index = mapping.find("x", name);
  series.select(index);
  pointNames.push(name);}

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

想要购买Anychart正版授权的朋友可以。

更多精彩内容,欢迎关注下方的微信公众号,及时获取产品最新资讯▼▼▼

跨平台图表控件AnyChart快速入门教程(九):数据集(下)


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP