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

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

點擊下載AnyChart最新試用版

樹形圖數據模型

類

這是允許您在AnyChart中使用樹數據的類的列表：

• tree - anychart.data.Tree

• item - anychart.data.Tree.DataItem

• traverser - anychart.data.Traverser

快速開始

要使用樹狀數據創建圖表，請通過將數據作為第二個參數傳遞給anychart.data.tree（）方法來創建數據樹"as-tree"。然后將樹傳遞給圖表構造函數：

// create datavar data = [
  {name:   "Root", children: [
    {name:   "Child 1", value: 65511098},
    {name:   "Child 2", value: 64938716},
    {name:   "Child 3", value: 59797978},
    {name:   "Child 4", value: 46070146}
  ]}];
// create a data treevar treeData = anychart.data.tree(data, "as-tree");
// create a chart and set the datavar chart = anychart.treeMap(treeData);
// set the container id
treemap.container("container");
// initiate drawing the chart
treemap.draw();

下面的示例演示如何使用相同的樹狀數據創建不同的圖表類型：

設定數據

Anychart中的樹數據結構定義為anychart.data.Tree類的實例，數據項定義為anychart.data.Tree.DataItem的實例。

要基于樹狀數據創建圖表，您應該將數據組織為樹狀或表狀。另外，您可以使用CSV字符串（另請參見：CSV中的數據）。然后，該數據由組件處理，并創建anychart.data.Tree的實例。

1、創建數據樹。第一步是使用或作為第二個參數將數據傳遞到anychart.data.tree（）方法："as-tree""as-table"

var treeData = anychart.data.tree(data, "as-tree");
var treeData = anychart.data.tree(data, "as-table");

如果您的數據是CSV字符串，則應傳遞CSV映射對象作為第二個參數。在CSV字符串部分中了解更多信息。

2、創建圖表。然后將此方法創建的anychart.data.Tree類的實例傳遞給圖表構造函數：

var chart = anychart.treeMap(treeData);

您也可以跳過第一步，也可以使用or 參數將數據傳遞到圖表的data（）方法或直接傳遞到圖表構造函數。在這種情況下，anychart.data.tree（）的實例是隱式創建的（要獲取它，請使用圖表的data（）方法）。"as-tree""as-table"

3、數據字段。數據字段的選擇取決于圖表類型以及數據的結構方式。如果數據以樹的形式組織，children則始終需要該字段。如果組織為表或CSV字符串，id并且parent是必需的-它們被用于指定元素的層次結構。

注1：要了解如何重新命名樹的數據模型（默認的領域children，parent，id）或地圖自定義字段，請參閱映射部分。

注2：甘特圖id始終需要該字段。

作為樹形圖

如果將數據組織為一棵樹，則每個父項都應具有一個children數據字段，在其中指定子項數組。

// create datavar data = [
  {name:     "Root", children: [
    {name:   "Parent 1", children: [
      {name: "Child 1-1", value: 150000000},
      {name: "Child 1-2", value:  45000000},
      {name: "Child 1-3", value:   3200000}
    ]},
    {name:   "Parent 2", children: [
      {name: "Child 2-1", value:  55000000},
      {name: "Child 2-2", value:  10600000},
      {name: "Child 2-3", value:   5200000}
    ]},
    {name:   "Parent 3", children: [
      {name: "Child 3-1", value:  21000000},
      {name: "Child 3-2", value:   9000000}
    ]}  
  ]} ];
// create a data tree
treeData = anychart.data.tree(data, "as-tree");
// create a chart and set the datavar chart = anychart.treeMap(treeData);

表格

如果將數據組織為表格，則在parent每個項目的字段中，應指定id其父項的值。根項目的父項應設置為null或不指定。

// create datavar data = [
  {id:  1, parent: null, name: "Root"},
  {id:  2, parent:    1, name: "Parent 1"},
  {id:  3, parent:    2, name: "Child 1-1", value: 150000000},
  {id:  4, parent:    2, name: "Child 1-2", value:  45000000},
  {id:  5, parent:    2, name: "Child 1-3", value:   3200000},
  {id:  6, parent:    1, name: "Parent 2"},
  {id:  7, parent:    6, name: "Child 2-1", value:  55000000},
  {id:  8, parent:    6, name: "Child 2-2", value:  10600000},
  {id:  9, parent:    6, name: "Child 2-3", value:   5200000},
  {id: 10, parent:    1, name: "Parent 3"},
  {id: 11, parent:   10, name: "Child 3-1", value:  21000000},
  {id: 12, parent:   10, name: "Child 3-2", value:   9000000}];
// create a data tree
treeData = anychart.data.tree(data, "as-table");
// create a chart and set the datavar chart = anychart.treeMap(treeData);

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

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