點擊下載Anychart最新試用版

Treemap是用于分層數據可視化的流行圖表類型。在本次教程中將向您展示只需四個簡單的步驟，如何使用JavaScript創建一個很酷的交互式樹圖圖表。每個至少對HTML5編碼有一點熟悉的人都會喜歡這種呈現的簡單方法來制作漂亮的JavaScript樹形圖，這些圖表非常適合嵌入到任何網頁或應用程序中。

如何創建JavaScript Treemap圖表

首先，這是一個基本的東西，你應該清楚地理解和記住。在使用JavaScript進行數據可視化時，圖表通常需要四個主要步驟：

1. 首先，創建一個帶有圖表容器的HTML頁面。

2. 其次，連接您需要的所有腳本。

3. 第三，加載可視化所需的數據。

4. 最后，編寫JS圖表代碼。

現在，讓我們深入研究這些步驟，以簡化一流的JavaScript圖表并構建一個非常棒的樹圖。

第1步：創建HTML頁面

在您真正開始繪制樹形圖表之前，請創建一個將放置可視化文件的HTML頁面。

      My First JavaScript Treemap Chart

這里最重要的部分是，  

第3步：加載數據

現在我們已經為樹形圖圖形可視化（步驟1）準備了一個位置并引用了JS圖表庫腳本（步驟2），所有這些都被設置為實質 - 加載數據（步驟3）并實際繪制它樹圖（步驟4）。

AnyChart JS庫允許Web開發人員從多種方式中選擇數據。要創建樹形圖圖表，必須應用樹數據模型，將數據組織為樹，表格或CSV字符串。

在這種情況下，將數據組織為樹，每個父項都提供了包含子項數組的子數據字段：

var data = [
  {name: "World", children: [
    {name: "Asia", children: [
      {name: "East", value: 1000},
      {name: "Southern", value: 803},
      {name: "Southeast", value: 415},
      {name: "Western", value: 182},
      {name: "Central", value: 36}
    ]},
    {name: "America", children: [
      {name: "North", value: 346},
      {name: "South", value: 316},
      {name: "Central", value: 114},
      {name: "Caribbean", value: 23}
    ]},
    {name: "Europe", children: [
      {name: "Eastern", value: 233},
      {name: "Western", value: 183},
      {name: "Southern", value: 135},
      {name: "Northern", value: 100}
    ]},
    {name: "Africa", children: [
      {name: "Western", value: 158},
      {name: "Eastern", value: 140},
      {name: "Northern", value: 121},
      {name: "Southern", value: 34},
      {name: "Middle", value: 20}
    ]},
    {name: "Oceania", children: [
      {name: "Oceania", value: 29}
    ]}
  ]}
];

第4步：編寫JS樹形圖圖表

現在，讓我們編寫可視化代碼。

整個JS圖表代碼必須包含在標記anychart.onDocumentReady()內的函數中

其次，添加步驟3中的數據和命令以創建數據樹：

anychart.onDocumentReady(function() {
  // create data
  var data = [
    {name: "World", children: [
      {name: "Asia", children: [
        {name: "East", value: 1000},
        {name: "Southern", value: 803},
        {name: "Southeast", value: 415},
        {name: "Western", value: 182},
        {name: "Central", value: 36}
      ]},
      {name: "America", children: [
        {name: "North", value: 346},
        {name: "South", value: 316},
        {name: "Central", value: 114},
        {name: "Caribbean", value: 23}
      ]},
      {name: "Europe", children: [
        {name: "Eastern", value: 233},
        {name: "Western", value: 183},
        {name: "Southern", value: 135},
        {name: "Northern", value: 100}
      ]},
      {name: "Africa", children: [
        {name: "Western", value: 158},
        {name: "Eastern", value: 140},
        {name: "Northern", value: 121},
        {name: "Southern", value: 34},
        {name: "Middle", value: 20}
      ]},
      {name: "Oceania", children: [
        {name: "Oceania", value: 29}
      ]}
    ]}
  ];
  // create a data tree
  treeData = anychart.data.tree(data, "as-tree");
});

第三，添加以下行以基于數據樹創建樹形圖圖表：

var chart = anychart.treeMap(treeData);

第四，命名圖表以清楚顯示圖形上顯示的內容：

chart.title("Internet Audience Worldwide (in million users)");

最后，命令在容器中繪制樹形圖：

// set the container id

chart.container("container");// draw the chart

chart.draw();

查看剛使用JavaScript構建的交互式樹形圖表！

結果：使用JavaScript構建的樹形圖表

請注意，默認情況下，樹形圖圖表帶有預先確定的視覺設計和交互設置。特別是，它具有令人敬畏的向下鉆取行為：當您單擊數據點時，您可以深入查看其子項。要返回并向上鉆取更高級別，請單擊標題。

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

這就是使用JavaScript創建一個交互式樹圖圖表的過程，是不是非常簡單易學呢？趕快下載或打開Anychart嘗試一下吧~

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

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