永利最大(官方)网站

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

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

点击下载AnyChart最新试用版

总览

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

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

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

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

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

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

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

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

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

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

Add

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

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

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

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

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);}

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

更新资料

使用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正版授权的朋友可以。

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