彩票走势图

跨平台图表控件AnyChart快速入门教程(七):数据处理

翻译|使用教程|编辑:吴园园|2019-11-12 10:24:00.120|阅读 245 次

概述:本系列教程将为您介绍如何快速掌握AnyChart,本节专门介绍AnyChart数据处理。

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

相关链接:

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

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

点击下载AnyChart最新试用版

总览

AnyChart html5图表库使您能够实时创建,读取,更新和删除图表,而无需完全重新加载和重画-我们的图表可以快速灵活地更改。

您可以使用一些易于使用的Java Script方法解决以下任务:

  • 数据流-您可以将一些新数据添加到数据集的末尾,同时可以选择从其开头删除一些数据。

  • 添加-您可以将一个或多个点添加到数据集的末尾。

  • 元添加-您可以向图表添加一些元数据。

  • 更新-您可以更改现有点的值。

  • 删除-您可以从数据集中删除任何点。

  • 插入-您可以在现有点之间添加一个或几个点。

本文介绍了如何解决所有这些任务。

注意:本文包含有关数据映射和系列数据管理的信息。

Add

AnyChart允许在显示图表后随时对其进行调整。要将元素添加到数据集中,请使用append()方法。这是示例:

data.append({x: 'P6', value: 20});

按钮的外观就是这样,它在单击时增加了一个点。

跨平台图表控件AnyChart快速入门教程(七):数据处理

请注意,在自动添加点的情况下,必须将其作为函数来完成:

function addPoint() {
  // first index for new point
  newIndex = (data.mapAs().getRowsCount())+1;
  // append data
  dataSet.append({
    // x value
    x: 'P' + indexSetter,
    // random value from 1 to 100
    value : Math.floor((Math.random() * 100)+ 1)
  });}

注意: Append方法仅有助于在数据集的末尾添加信息。要将信息添加到任何位置,请参见下面的.insert()方法部分。

元添加

添加自定义数据是一种不错的功能,但是图表必须尽可能有用且信息丰富。图表的任何点都可以包含元信息。如果您希望在图表的一部分悬停时可以使用一些元信息,那么您的代码将如下所示:

// function, if listener triggersfunction(e) {
  var info = view.get(e.pointIndex, 'value');
 
  // receive all necessary information and summarize it in one variable
  var infoGetter = 'Application Name:<b>' +
  view.get(e.pointIndex, 'x') +
  '</b><br/><a style="color: red;">Average</a> Unique Users: <b>' +
  view.get(e.pointIndex, 'value') +
  '</b> millions<br/>Year Over Year: <b>' +
  view.get(e.pointIndex, 'yoy') + '%</b>' ;
  // set received information into chart title
  chart.title().text(infoGetter).fontWeight(300);}

请注意,此方法允许您在图表标题中显示此信息。

跨平台图表控件AnyChart快速入门教程(七):数据处理

更新资料

使用set()方法完成图表数据集的更新。这就是代码的一部分的样子:

function(e) {
  view.set(
    e.pointIndex,   // get index of clicked column
    'value',        // get parameter to update
    view.get(e.pointIndex, 'value') + 5 // parameter updating
  );
}

在点击时将5加到一列。

删除

我们可以添加数据,也可以删除它。使用remove()方法从数据集中删除一行。

dataset.remove(0); // removes first row in dataset

单击任何列后,第一列将被删除。

插入

insert()方法与append()方法非常相似,但是它允许您将信息插入任何位置。

data.insert(
  {x: 'new P', value : 50},   //new data to set
  2                           //row to insert data);

新列插入随机位置并用红色对其进行着色。

数据流

数据流通常按计时器顺序添加和/或删除点。为了流式传输数据,我们可以使用上述两种方法:append()和remove()。在下面的示例中,我们在按钮单击上设置了事件,该事件会添加具有随机值的新数据点并删除第一个数据点。

这就是我们的功能代码如下所示:

function() {
  // append data
  dataSet.append({
 
    // x value
    x: 'P' + indexSetter,
 
    // random value from 1 to 500
    value : Math.floor((Math.random() * 500)+ 1)
  });
 
  // removes first point
  dataSet.remove(0);
  indexSetter++;}, 200   // interval

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

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

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

跨平台图表控件AnyChart快速入门教程(七):数据处理


标签:

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

文章转载自:

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP