AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。重要推薦：

AnyChart現已更新至最新版本8.7.0，九大數據可視化新功能上線，改進了功能并修復了一些bug。新版本，新功能，趕快下載體驗吧~（點擊查看更新詳情）

點擊下載AnyChart最新試用版

訪問行

數據集的行沒有自己的類，因此無法直接訪問它們。但是，您可以讀取整行或給定數據字段中的值。另外，您可以搜索行并迭代數據。

數據處理

讀

要讀取數據，請使用以下方法：

• getRowsCount（） -返回數據集中的行數

• row（） -接受一行的索引，

• 返回該行get（） -接受行的索引和字段的名稱，返回值

在下面的示例中，getRowsCount（）和get（）用于獲取圖表最后一點的參數和值：

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

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