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

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

點擊下載AnyChart最新試用版

正在搜尋

要搜索項目，請使用anychart.data.Tree類的以下方法：

search()
searchItems()
filter()

search()

search()方法返回的任一數據項或一個項目的陣列，而searchItems（）總是返回一個數組。兩種方法都使用三個參數來調用：數據字段的名稱，值和比較函數。

在下一個示例search（）中，結合使用Treemap的drillTo方法，用于查找具有特定名稱的項目并將其向下鉆取：

/* locate an item in the data tree
and get it as an object */var item = treeData.search("name", "Item 3-4");
// drill down to the item
chart.drillTo(item);

比較函數接受數據字段的名稱和值，并返回負數，零或正數。

以下示例顯示如何使用searchItems（）方法和比較函數執行搜索，該函數用于訪問自定義數據字段中對象的屬性employee：

// create datavar data = [
  {
    id: "1",
    name: "Root",
    actualStart: "2018-01-15",
    actualEnd: "2018-03-10",
    actual: {},
    employee: {firstName: null, lastName: null},
    children: [
      {
        id: "1_1",
        name: "Child 1",
        actualStart: "2018-01-15",
        actualEnd: "2018-01-25",
        employee: {firstName: "John", lastName: "Doe"}
      },
      {
        id: "1_2",
        name: "Child 2",
        actualStart: "2018-01-20",
        actualEnd: "2018-02-04",
        employee: {firstName: "Frank", lastName: "Foe"}
      },
      {
        id: "1_3",
        name: "Child 3",
        actualStart: "2018-02-05",
        actualEnd: "2018-02-05",
        employee: {firstName: "Marta", lastName: "Moe"}
      },
      {
        id: "1_4",
        name: "Child 4",
        actualStart: "2018-02-05",
        actualEnd: "2018-02-24",
        employee: {firstName: "John", lastName: "Doe"}
      },
      {
        id: "1_5",
        name: "Child 5",
        actualStart: "2018-02-25",
        actualEnd: "2018-03-10",
        employee: {firstName: "Jane", lastName: "Poe"}
      }
  ]}];
// create a data tree
treeData = anychart.data.tree(data, "as-tree");
// create a gantt chart
chart = anychart.ganttProject();
// set the data
chart.data(treeData);
// a comparison functionfunction comparisonFunction(fieldValue, comparisonValue) {
  if (comparisonValue == fieldValue.firstName + fieldValue.lastName) {
    return 0;
  } else {
    return 1;
  }}
// search for itemsvar items = treeData.searchItems("employee", "JohnDoe", comparisonFunction);

filter()

所述filter()方法返回的數據項的數組。始終使用過濾器函數作為參數來調用它，該函數接受數據項并返回true或false。

使用此方法可以設置高級搜索條件-例如，查找大于或小于給定值的所有元素或比較兩個數據字段，如下面的示例中所示。

在此示例中，使用過濾器功能查找持續時間大于給定持續時間的項目，持續時間是根據兩個數據字段計算得出的（這些項目的名稱顯示在圖表標題中，并且其節點為彩色）：

// search for items with duration equal or greater than a given onevar input = (document.getElementById("valueInput").value) * 1000 * 3600 * 24;var items = treeData.filter(function(item) {
  return item.get("actualEnd") - item.get("actualStart") >= input;});

指標

對索引數據執行某些操作的速度更快。要在數據字段上創建索引，請在anychart.data.Tree實例上調用createIndexOn（）并將字段名稱指定為參數：

// create an index
treeData.createIndexOn("value");

注意：您不能在parent或child字段上創建索引。

要刪除字段的索引，請使用帶有字段名稱作為參數的removeIndexOn（）：

// remove the index
treeData.removeIndexOn("value");

遍歷

遍歷是遍歷樹中所有項目的過程。您可以直接訪問它們，但是AnyChart提供了更簡便，更快速的即用型解決方案。

要執行遍歷，請使用getTraverser（）方法獲取anychart.data.Traverser對象。然后調用其方法：

• advance（） -將遍歷器移至下一個項目

• current（） -返回當前項目

• get（） -返回給定字段中當前項目的值

• getDepth（） -返回當前項目的深度

• meta（） -設置/獲取給定字段中當前項目的元值

• nodeYieldCondition（） -設置/獲取一個確定是否返回項目的函數

• set（） -在給定字段中設置當前項目的值

• reset（） -將遍歷器重置為第一項之前的默認位置

• toArray（） -以項目數組的形式返回當前遍歷器

• traverseChildrenCondition（） -設置/獲取一個函數，該函數確定遍歷器是否遍歷項的子項

在下面的示例中，advance（）和get（）方法用于顯示所有數據項的名稱：

// get the traverser of a treevar traverser = treeData.getTraverser();
/* get the element displaying information about the tree */var treeInfo = document.getElementById("treeInfo");
// display the names of all data items in the treewhile (traverser.advance()) {
  var newElement = document.createElement("li");
  newElement.innerText = traverser.get("name");
  treeInfo.appendChild(newElement);}

在下一個示例中，將progress （）和current（）與Treemap的drillTo方法結合使用，以向下鉆取圖表的所有節點。的復位（）當它完成方法允許再次啟動遍歷。

// get the traverser of a tree
traverser = treeData.getTraverser();
// skip the root node
traverser.advance();
// get the next data item and drill to itfunction nextItem() {
  // try to go to the next item
  if (traverser.advance()) {
    /* get the current item
    as an instance of the dataItem class */
    var dataItem = traverser.current();
    // drill down to the item
    chart.drillTo(dataItem);
  }
  else {
    //reset the traverser
    traverser.reset();
  }}

大事記

這是與樹數據模型一起使用的事件的完整列表：

您可以通過調用帶有或作為參數的dispatchEvents（）方法來監聽事件以及停止或開始調度事件。falsetrue

在下面的示例中，有一個啟用了實時編輯模式的甘特圖。當您可以拖放行時，將"treeItemMove"被觸發。編輯元素和數據網格文本時，將"treeItemUpdate"觸發。要了解更多信息，請參閱實時編輯：默認行為。

此外，還有一個用于添加項目的自定義按鈕，它會觸發"treeItemCreate"。

事件偵聽器用于更新圖表標題：

/* listen to the treeItemMove event
and update the chart title */
treeData.listen("treeItemMove", function (e) {
  var itemName = e.item.get("name");
  chart.title("Tree Data Model: Events

< " +
              " treeItemMove >");});
/* listen to the treeItemUpdate event
and update the chart title */
treeData.listen("treeItemUpdate", function (e) {
  var itemName = e.item.get("name");
  chart.title("Tree Data Model: Events

< " +
              " treeItemUpdate >");});
/* listen to the treeItemCreate event
and update the chart title */
treeData.listen("treeItemCreate", function (e) {
  var itemName = e.item.get("name");
  chart.title("Tree Data Model: Events

< " +
              ": treeItemCreate >");});

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

想要購買Anychart正版授權的朋友可以