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

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼