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

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

點擊下載AnyChart最新試用版

CSV字符串

要將數(shù)據(jù)設(shè)置為CSV字符串，請使用以下參數(shù)調(diào)用anychart.data.tree（）方法：

• CSV字符串

• 具有CSV映射的對象

• 具有CSV設(shè)置的對象（可選）

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

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

注意：數(shù)據(jù)的結(jié)構(gòu)應(yīng)類似于表中的數(shù)據(jù)集：通過映射id和parent字段來指定元素的層次結(jié)構(gòu)（其他字段的選擇取決于圖表類型）。

以下示例顯示了如何將數(shù)據(jù)設(shè)置為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、要重命名的樹數(shù)據(jù)模型所需的字段- ，，children -傳遞一個映射對象到anychart.data.tree（）當(dāng)您創(chuàng)建一個數(shù)據(jù)樹的構(gòu)造。parentid

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

之后，將數(shù)據(jù)樹傳遞給圖表構(gòu)造函數(shù)或圖表的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、如果需要重命名其他字段，請通過將映射對象傳遞到數(shù)據(jù)樹的mapAs方法來創(chuàng)建映射。然后將映射傳遞給圖表構(gòu)造函數(shù)或圖表的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);

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

在這里，數(shù)據(jù)被設(shè)置為樹。該anychart.data.tree（）構(gòu)造函數(shù)的自定義字段映射child_items作為children由樹的數(shù)據(jù)模型所需的字段。該一舉成名方法映射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中的數(shù)據(jù)項被定義為anychart.data.Tree.DataItem類的實例。如果您需要訪問它們，則可以搜索它們或調(diào)用特殊方法。

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

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

• getChildren（） –返回根項目數(shù)組

• numChildren（） –返回根數(shù)

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

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

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

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

• numChildren（） -返回項目的子代數(shù)

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

閱讀

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

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

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

新增中

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

要將子元素添加到數(shù)據(jù)項，請訪問anychart.data.Tree.DataItem的實例，并在其上調(diào)用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");

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

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

更新中

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

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

刪除

要從數(shù)據(jù)中刪除根項，請在anychart.data.Tree實例上調(diào)用以下方法之一：

• removeChild（） -刪除根

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

• removeChildren（） -刪除所有根

要刪除數(shù)據(jù)項的子項，請訪問anychart.data.Tree.DataItem的實例并調(diào)用以下方法之一：

• removeChild（） -刪除一個子項

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

• removeChildren（） -刪除所有子項

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

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

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

想要購買Anychart正版授權(quán)的朋友可以