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

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

點擊下載AnyChart最新試用版

CSV字符串

要將數據設置為CSV字符串，請使用以下參數調用anychart.data.tree（）方法：

• CSV字符串

• 具有CSV映射的對象

• 具有CSV設置的對象（可選）

默認情況下，AnyChart會將CSV數據中的逗號視為列分隔符，并將換行符視為行分隔符，但是您可以在對象中指定替代設置并將其作為第三個參數傳遞。

使用columnsSeparator和rowsSeparator字段設置分隔符，并ignoreFirstRow在需要時忽略數據的第一行。

注意：數據的結構應類似于表中的數據集：通過映射id和parent字段來指定元素的層次結構（其他字段的選擇取決于圖表類型）。

以下示例顯示了如何將數據設置為CSV字符串：

// create datavar data = "id;parent;name;value*" +
           "1;null;Root*"+
           "2;1;Parent 1*" +
           "3;2;Child 1-1;150000000*" +
           "4;2;Child 1-2;45000000*" +
           "5;2;Child 1-3;3200000*" +
           "6;1;Parent 2;*" +
           "7;6;Child 2-1;55000000*" +
           "8;6;Child 2-2;10600000*" +
           "9;6;Child 2-3;5200000*" +
           "10;1;Parent 3;*" +
           "11;10;Child 3-1;21000000*" +
           "12;10;Child 3-2;9000000*";
// create an object with a csv mapping
csvMapping = {"id": 0, "parent": 1, "name": 2, "value": 3};
// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};
// create a data treevar treeData = anychart.data.tree(data, csvMapping, csvSettings);
// create a chart and set the datavar chart = anychart.treeMap(treeData);

制圖

1、要重命名的樹數據模型所需的字段- ，，children -傳遞一個映射對象到anychart.data.tree（）當您創建一個數據樹的構造。parentid

如果將數據設置為樹或表，請將映射作為第四個參數傳遞。請注意，第三個應設置為null–僅與CSV數據一起使用以指定CSV設置。CSV數據的映射應作為第二個參數傳遞。

之后，將數據樹傳遞給圖表構造函數或圖表的data（）方法。

// create a data treevar treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});
// create a chart
chart = anychart.ganttProject();
// set the data
chart.data(treeData);

2、如果需要重命名其他字段，請通過將映射對象傳遞到數據樹的mapAs方法來創建映射。然后將映射傳遞給圖表構造函數或圖表的data（）方法。

// create a data treevar treeData = anychart.data.tree(data, "as-tree");
// map the datavar mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});
// create a chart
chart = anychart.ganttProject();
// set the data
chart.data(mapping);

可以在下面的示例中同時使用這兩種映射數據的方式。

在這里，數據被設置為樹。該anychart.data.tree（）構造函數的自定義字段映射child_items作為children由樹的數據模型所需的字段。該一舉成名方法映射start_date和end_date作為actualStart和actualEnd由甘特圖必需的：

// create datavar data = [
  {
    id: "1",
    name: "Root",
    start_date: "2018-01-15",
    end_date: "2018-03-10",
    child_items: [
      {
        id: "1_1",
        name: "Child 1",
        start_date: "2018-01-15",
        end_date: "2018-01-25"
      },
      {
        id: "1_2",
        name: "Child 2",
        start_date: "2018-01-20",
        end_date: "2018-02-04"
      },
      {
        id: "1_3",
        name: "Child 3",
        start_date: "2018-02-05",
        end_date: "2018-02-05"
      },
      {
        id: "1_4",
        name: "Child 4",
        start_date: "2018-02-05",
        end_date: "2018-02-24"
      },
      {
        id: "1_5",
        name: "Child 5",
        start_date: "2018-02-25",
        end_date: "2018-03-10"
      }
  ]}];
// create a data treevar treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});
// map the datavar mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});
// create a chart
chart = anychart.ganttProject();
// set the data
chart.data(mapping);

訪問項目

AnyChart中的數據項被定義為anychart.data.Tree.DataItem類的實例。如果您需要訪問它們，則可以搜索它們或調用特殊方法。

要在根級別訪問項目，請使用anychart.data.Tree的以下方法：

• getChildAt（） –返回具有給定索引的根項目

• getChildren（） –返回根項目數組

• numChildren（） –返回根數

• indexOfChild（） –返回給定項目的索引（如果是根則返回-1）

要更深入一點，請使用anychart.data.Tree.DataItem的方法：

• getChildAt（） -返回具有給定索引的項的子項

• getChildren（） -返回包含項的所有子項的數組

• numChildren（） -返回項目的子代數

• getParent（） -返回項目的父項

閱讀

您可以使用給定名稱讀取項目的數據字段的值：訪問anychart.data.Tree.DataItem的實例并使用get（）方法。

在下面的示例中，此方法用于顯示圖表標題中的最后一個子項的名稱：

// get the name of the last childvar lastChild = treeData.getChildAt(0).getChildren().length - 1;var lastChildName = treeData.getChildAt(0).getChildAt(lastChild).get("name");

新增中

您可以將根項目添加到數據中：在anychart.data.Tree實例上調用addChild（）或addChildAt（）方法。請注意，第二種方法添加具有給定索引的項目。

要將子元素添加到數據項，請訪問anychart.data.Tree.DataItem的實例，并在其上調用addChild（）或addChildAt（）：

// add a new data item
treeData.getChildAt(0).addChild({"name": "New Child", "value": 10000000});

您還可以使用addData（）方法一次添加多個根項目：

//create new datavar newData = [
  {"name": "New Node 1", "value": 10000000},
  {"name": "New Node 2", "value": 10000000}];
// add new data
treeData.addData(newData, "as-tree");

注意： “樹圖”圖表上只能顯示一個根元素，因此盡管仍會更新數據，但是使用此方法不會更改樹圖的外觀。

這是一個森伯斯特圖表，其中的按鈕一次添加兩個根節點：

更新中

要更新項目的數據字段，請訪問anychart.data.Tree.DataItem的實例并調用set（）。使用字段名稱和新值作為參數：

// update the first child
treeData.getChildAt(0).getChildAt(0).set("name", "New Name");
treeData.getChildAt(0).getChildAt(0).set("value", 120000000);
treeData.getChildAt(0).getChildAt(0).set("fill", "#00bfa5");

刪除

要從數據中刪除根項，請在anychart.data.Tree實例上調用以下方法之一：

• removeChild（） -刪除根

• removeChildAt（） -刪除具有給定索引的根

• removeChildren（） -刪除所有根

要刪除數據項的子項，請訪問anychart.data.Tree.DataItem的實例并調用以下方法之一：

• removeChild（） -刪除一個子項

• removeChildAt（） -刪除具有給定索引的子級

• removeChildren（） -刪除所有子項

在此示例中，每次按下按鈕時，都會刪除根項目的當前最后一個子項：

var lastChild = treeData.getChildAt(0).getChildren().length - 1;
treeData.getChildAt(0).removeChildAt(lastChild);

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

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