點(diǎn)擊下載Anychart最新試用版

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

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

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

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

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

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

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

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

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

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

      My First JavaScript Treemap Chart

這里最重要的部分是，  

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

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

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

在這種情況下，將數(shù)據(jù)組織為樹，每個(gè)父項(xiàng)都提供了包含子項(xiàng)數(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)在，讓我們編寫可視化代碼。

整個(gè)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)建的樹形圖表

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

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

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

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

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