AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤(pán)、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。重要推薦：

AnyChart現(xiàn)已更新至最新版本8.7.0，九大數(shù)據(jù)可視化新功能上線，改進(jìn)了功能并修復(fù)了一些bug。新版本，新功能，趕快下載體驗(yàn)吧~（點(diǎn)擊查看更新詳情）

點(diǎn)擊下載AnyChart最新試用版

總覽

AnyChart html5圖表庫(kù)使您能夠?qū)崟r(shí)創(chuàng)建，讀取，更新和刪除圖表，而無(wú)需完全重新加載和重畫(huà)-我們的圖表可以快速靈活地更改。

您可以使用一些易于使用的Java Script方法解決以下任務(wù)：

• 數(shù)據(jù)流-您可以將一些新數(shù)據(jù)添加到數(shù)據(jù)集的末尾，同時(shí)可以選擇從其開(kāi)頭刪除一些數(shù)據(jù)。

• 添加-您可以將一個(gè)或多個(gè)點(diǎn)添加到數(shù)據(jù)集的末尾。
  

• 元添加-您可以向圖表添加一些元數(shù)據(jù)。
  

• 更新-您可以更改現(xiàn)有點(diǎn)的值。
  

• 刪除-您可以從數(shù)據(jù)集中刪除任何點(diǎn)。
  

• 插入-您可以在現(xiàn)有點(diǎn)之間添加一個(gè)或幾個(gè)點(diǎn)。

本文介紹了如何解決所有這些任務(wù)。

注意：本文包含有關(guān)數(shù)據(jù)映射和系列數(shù)據(jù)管理的信息。

Add

AnyChart允許在顯示圖表后隨時(shí)對(duì)其進(jìn)行調(diào)整。要將元素添加到數(shù)據(jù)集中，請(qǐng)使用append（）方法。這是示例：

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

按鈕的外觀就是這樣，它在單擊時(shí)增加了一個(gè)點(diǎn)。

請(qǐng)注意，在自動(dòng)添加點(diǎn)的情況下，必須將其作為函數(shù)來(lái)完成：

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方法僅有助于在數(shù)據(jù)集的末尾添加信息。要將信息添加到任何位置，請(qǐng)參見(jiàn)下面的.insert（）方法部分。

元添加

添加自定義數(shù)據(jù)是一種不錯(cuò)的功能，但是圖表必須盡可能有用且信息豐富。圖表的任何點(diǎn)都可以包含元信息。如果您希望在圖表的一部分懸停時(shí)可以使用一些元信息，那么您的代碼將如下所示：

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

請(qǐng)注意，此方法允許您在圖表標(biāo)題中顯示此信息。

更新資料

使用set（）方法完成圖表數(shù)據(jù)集的更新。這就是代碼的一部分的樣子：

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

在點(diǎn)擊時(shí)將5加到一列。

刪除

我們可以添加數(shù)據(jù)，也可以刪除它。使用remove（）方法從數(shù)據(jù)集中刪除一行。

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

新列插入隨機(jī)位置并用紅色對(duì)其進(jìn)行著色。

數(shù)據(jù)流

數(shù)據(jù)流通常按計(jì)時(shí)器順序添加和/或刪除點(diǎn)。為了流式傳輸數(shù)據(jù)，我們可以使用上述兩種方法：append（）和remove（）。在下面的示例中，我們?cè)诎粹o單擊上設(shè)置了事件，該事件會(huì)添加具有隨機(jī)值的新數(shù)據(jù)點(diǎn)并刪除第一個(gè)數(shù)據(jù)點(diǎn)。

這就是我們的功能代碼如下所示：

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

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

想要購(gòu)買(mǎi)Anychart正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼