點擊下載Anychart最新試用版

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

如何創(chuàng)建JavaScript Treemap圖表

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

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

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

3. 第三，加載可視化所需的數(shù)據(jù)。

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

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

第1步：創(chuàng)建HTML頁面

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

      My First JavaScript Treemap Chart

這里最重要的部分是，  

第3步：加載數(shù)據(jù)

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

AnyChart JS庫允許Web開發(fā)人員從多種方式中選擇數(shù)據(jù)。要創(chuàng)建樹形圖圖表，必須應(yīng)用樹數(shù)據(jù)模型，將數(shù)據(jù)組織為樹，表格或CSV字符串。

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

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樹形圖圖表

現(xiàn)在，讓我們編寫可視化代碼。

整個JS圖表代碼必須包含在標(biāo)記anychart.onDocumentReady()內(nèi)的函數(shù)中

其次，添加步驟3中的數(shù)據(jù)和命令以創(chuàng)建數(shù)據(jù)樹：

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

第三，添加以下行以基于數(shù)據(jù)樹創(chuàng)建樹形圖圖表：

var chart = anychart.treeMap(treeData);

第四，命名圖表以清楚顯示圖形上顯示的內(nèi)容：

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

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

// set the container id

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

chart.draw();

查看剛使用JavaScript構(gòu)建的交互式樹形圖表！

結(jié)果：使用JavaScript構(gòu)建的樹形圖表

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

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

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

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

有關(guān)產(chǎn)品資訊的更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品信息▼▼▼