利用JavaScript構(gòu)建樹形圖的方法詳解

更新時(shí)間：2022年06月13日 10:53:16 作者：翟珂

?樹形圖可視化廣泛用于分層數(shù)據(jù)分析。如果你沒有經(jīng)驗(yàn)還想創(chuàng)建一個(gè)，那將會(huì)有些復(fù)雜。下面是一個(gè)詳細(xì)教程，教你如何使用JavaScript創(chuàng)建交互式樹形圖

宇宙中只有我們嗎？我們每個(gè)人都曾在某個(gè)時(shí)候問過自己這個(gè)問題。當(dāng)我們在考慮地球是否是宇宙中唯一可居住的行星時(shí)，我們可能會(huì)思考宇宙究竟有多大。讓我們在樹形圖的幫助下看看吧！在本教程中，我們將使用樹形映射出宇宙中已知的10個(gè)最大的星系。

什么是樹形圖

在進(jìn)入教程之前，了解一下樹形圖的概念。樹形圖是一種流行的技術(shù)，用于將分層組織、樹狀結(jié)構(gòu)的數(shù)據(jù)可視化。它可以一目了然地展示出層次結(jié)構(gòu)以及各個(gè)數(shù)據(jù)點(diǎn)的值，它使用了大小與相應(yīng)數(shù)量成比例的嵌套矩形。

樹的每個(gè)分支都是一個(gè)矩形，對(duì)于子分支，其中嵌套了較小的矩形。通過顏色和接近度顯示數(shù)據(jù)，樹形圖可以輕松表示大量數(shù)據(jù)，同時(shí)有效利用空間，非常適合比較層次結(jié)構(gòu)中的比例。

樹形圖類型是由Ben Shneiderman教授發(fā)明的，他在信息設(shè)計(jì)和人機(jī)交互領(lǐng)域作出了重大貢獻(xiàn)。樹形圖被用于許多數(shù)據(jù)可視化領(lǐng)域，可用于分析股票市場、人口普查系統(tǒng)和選舉統(tǒng)計(jì)數(shù)據(jù)，以及數(shù)據(jù)新聞、硬盤探索工具等。

瀏覽JS樹形圖

下面將使用JavaScript構(gòu)建一個(gè)樹形圖來比較已知宇宙中排名前10的星系的大小。JS樹狀圖在本教程結(jié)束時(shí)的樣子：

創(chuàng)建一個(gè)基本的JS樹形圖

創(chuàng)建基于JavaScript的樹狀圖通常需要以下四個(gè)基本步驟：

1. 創(chuàng)建一個(gè)HTML頁面

2. 參考JavaScript文件

3. 設(shè)置數(shù)據(jù)

4. 編寫一些JS樹代碼

如果你是 HTML、CSS 和JavaScript方面的新手，請不要擔(dān)心。本文將詳細(xì)介紹每一步，在學(xué)習(xí)完本教程之后，你可以嘗試去做自己的JS樹狀圖。

1. 創(chuàng)建一個(gè)HTML頁面

首先需要?jiǎng)?chuàng)建一個(gè)基本的HTML頁面。添加一個(gè)HTML塊元素 (<div>)，并將樹形圖放置其中，為其分配一個(gè)ID屬性（讓它成為“容器”），以便稍后在代碼中引用它。

然后為 <div> 設(shè)置一些樣式。將寬度和高度屬性定義為 100%，邊距和填充為 0。當(dāng)然，你可以根據(jù)自己的喜好進(jìn)行更改。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <style type="text/css">   
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. 參考JavaScript文件

接下來，需要引用所需腳本，用這些腳本創(chuàng)建樹形圖。

現(xiàn)在有多個(gè)JavaScript圖表庫可供選擇。創(chuàng)建交互式數(shù)據(jù)可視化的基本步驟與它們中的任何一個(gè)都是差不多的。在這里，為了說明問題，我將使用AnyChart，它支持樹形圖并有免費(fèi)版本，其源代碼在GitHub上開放。

因此，要構(gòu)建樹形圖，需要導(dǎo)入“核心”和“樹形圖”模塊。在第一步創(chuàng)建的HTML頁面的 head 部分中引用它們。從 CDN 獲取它們（或下載文件）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script>
    <style type="text/css">   
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
  </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

3.設(shè)置數(shù)據(jù)

設(shè)置數(shù)據(jù)后將把已知宇宙中最大的前10個(gè)星系的規(guī)模可視化。這些星系非常龐大，所以需要以它們的直徑來衡量它們是多少光年（光年是一束光在一個(gè)地球年中傳播的距離，相當(dāng)于大約 6 萬億英里）。

我已經(jīng)從 Largest.org 獲取了星系尺度的數(shù)據(jù)。

對(duì)于圖表，樹結(jié)構(gòu)數(shù)據(jù)根級(jí)元素是“星系”，（按星系類型）分為“橢圓”和“螺旋”作為其子元素，它們又有個(gè)別星系對(duì)象的數(shù)組作為它們自己的子元素。

每個(gè)星系對(duì)象都具有<名稱 \ 尺度>鍵值屬性。例如，{name: "IC 1101", value: 4000000} 表示規(guī)模為 4,000,000 光年的 IC 1101 星系。說實(shí)話，很難理解它有多大。

var dataSet = [
  {name: "Galaxies", children: [
    {name: "Elliptical", children: [
      {name: "IC 1101", value: 4000000},
      {name: "Hercules A", value: 1500000},
      {name: "A2261-BCG", value: 1000000},
      {name: "ESO 306-17", value: 1000000},
      {name: "ESO 444-46", value: 402200},
    ]},
    {name: "Spiral", children: [  
      {name: "Rubin's Galaxy", value: 832000},
      {name: "Comet Galaxy", value: 600000},
      {name: "Condor Galaxy", value: 522000},
      {name: "Tadpole Galaxy", value: 280000},
      {name: "Andromeda Galaxy", value: 220000} 
    ]}
  ]}
];

4. 編寫一些JS樹形圖代碼

到此只需幾行JavaScript代碼就可以為樹形圖提供動(dòng)力。

1.使用anychart.onDocumentReady() 函數(shù)，加載樹形圖的所有JavaScript代碼，確保它在網(wǎng)頁完全加載并準(zhǔn)備執(zhí)行。

<script>
  anychart.onDocumentReady(function () {
    // JS樹映射代碼會(huì)寫到這里
  });
</script>

2.然后，從第3步開始在樹形圖中添加我們想要可視化的數(shù)據(jù)。

<script>
 
  anychart.onDocumentReady(function () {
 
    var dataSet = [
      {name: "Galaxies", children: [
        {name: "Elliptical", children: [
          {name: "IC 1101", value: 4000000},
          {name: "Hercules A", value: 1500000},
          {name: "A2261-BCG", value: 1000000},
          {name: "ESO 306-17", value: 1000000},
          {name: "ESO 444-46", value: 402200},
        ]},
        {name: "Spiral", children: [  
          {name: "Rubin's Galaxy", value: 832000},
          {name: "Comet Galaxy", value: 600000},
          {name: "Condor Galaxy", value: 522000},
          {name: "Tadpole Galaxy", value: 280000},
          {name: "Andromeda Galaxy", value: 220000} 
        ]}
      ]}
    ];
 
  });
 
</script>

3.添加以下代碼將數(shù)據(jù)轉(zhuǎn)換到圖上。

var chart = anychart.treeMap(dataSet, "as-tree");

4.添加一個(gè)標(biāo)題，將圖表放入之前定義的 <div> 容器中，并使用 draw 命令顯示它。

chart.title("The 10 Largest Galaxies in the Known Universe");
chart.container("container");
chart.draw();

現(xiàn)在JS樹形圖基本上已經(jīng)準(zhǔn)備好了：

加載樹形圖時(shí)，只會(huì)顯示兩個(gè)圖塊，“橢圓”和“螺旋”。然后可以單擊它們，展開其各自的子星系，這就是所謂的下鉆操作。

為什么會(huì)只有兩塊？因?yàn)槟J(rèn)情況下，最大深度值設(shè)置為1。這意味著一次只能看到其父級(jí)的一個(gè)級(jí)別。較低的級(jí)別是隱藏的。在第一層，將“星系”分為“橢圓”和“螺旋”，所以只能看到這一層。

顯示所有星系圖塊只需要使用maxDepth()函數(shù)更改最大深度值。

chart.maxDepth(2);

效果如下：

在這張圖表中，可以看到星系是如何根據(jù)層次結(jié)構(gòu)進(jìn)行分組的，還可以單擊頂部的“橢圓”或“螺旋”標(biāo)題來放大其子星系。

完整代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script>
    <style type="text/css">   
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
 
    <script>
 
      anychart.onDocumentReady(function () {
 
        // 創(chuàng)建數(shù)據(jù)
        var dataSet = [
          {name: "Galaxies", children: [
            {name: "Elliptical", children: [
              {name: "IC 1101", value: 4000000},
              {name: "Hercules A", value: 1500000},
              {name: "A2261-BCG", value: 1000000},
              {name: "ESO 306-17", value: 1000000},
              {name: "ESO 444-46", value: 402200},
            ]},
            {name: "Spiral", children: [  
              {name: "Rubin's Galaxy", value: 832000},
              {name: "Comet Galaxy", value: 600000},
              {name: "Condor Galaxy", value: 522000},
              {name: "Tadpole Galaxy", value: 280000},
              {name: "Andromeda Galaxy", value: 220000} 
            ]}
          ]}
        ];
        
        // 創(chuàng)建樹形圖并設(shè)置數(shù)據(jù)
        var chart = anychart.treeMap(dataSet, "as-tree");
 
        // 設(shè)置圖表標(biāo)題
        chart.title("The 10 Largest Galaxies in the Known Universe");
 
        // 設(shè)置圖表的容器id
        chart.container("container");
 
        // 開始繪制圖表
        chart.draw();
 
      });
 
    </script>
  </body>
</html>

現(xiàn)在，你可以一目了然地看到10個(gè)最大星系的規(guī)模并進(jìn)行比較。下面展示如何自定義JavaScript樹形圖。

自定義JS樹形圖

A. 改變顏色

改變?nèi)魏螆D表的外觀和感覺有一種簡單方法就是更改顏色。

chart.normal().fill('#B46FC2');
chart.hovered().fill('#44008B', 0.8);
chart.selected().fill('#0A0068', 0.8);
chart.selected().hatchFill("forward-diagonal", '#282147', 2, 20);

添加了fill()和hashFill()方法來更改樹形圖的顏色。

B. 應(yīng)用線性色標(biāo)

在樹形圖中，除了大小，圖塊的顏色也有助于突出顯示比例?？梢越柚€性色標(biāo)根據(jù)相應(yīng)的數(shù)據(jù)維度自動(dòng)為圖塊著色。

創(chuàng)建一個(gè)線性色標(biāo)，為其提供兩個(gè)值，一個(gè)為最低范圍值，另一個(gè)為最高值，最后啟用顏色范圍。

var customColorScale = anychart.scales.linearColor();
customColorScale.colors(['#37B8F7', '#ffcc00']);
chart.colorScale(customColorScale);
chart.colorRange().enabled(true);
chart.colorRange().length('90%');

實(shí)現(xiàn)這些需要修改上一節(jié)中的代碼。

C. 格式化標(biāo)簽和工具提示

可以使用HTML來格式化標(biāo)簽。為此，需要為標(biāo)簽啟用 HTML。然后，你就可以不受限制地使用HTML對(duì)它們進(jìn)行格式化。

可以把標(biāo)簽格式化為<span>HTML元素，并對(duì)其進(jìn)行樣式設(shè)計(jì)，以增加字體大小和改變顏色。

chart.labels().useHtml(true);
chart.labels().format(
  "<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}"
);

正如你在上面的代碼片段中看到的，還使用了{(lán)%name}和{%value}標(biāo)記，用來更改樹形圖標(biāo)簽和工具提示的文本。這樣，在創(chuàng)建可視化時(shí)將為每個(gè)星系輸出名稱和比例值。

此外，使用format()方法來定制工具提示的文本。一個(gè)內(nèi)容豐富的工具提示有助于更好地理解數(shù)據(jù)。

chart.tooltip().format(
    "Scale: {%value} light-years"
);

D. 按升序排列圖塊

默認(rèn)情況下，樹形圖圖塊按降序排列?？梢钥吹叫窍凳菑母叩降团帕械?，規(guī)模最大的IC 1101星系是左起第一個(gè)。

如果需要升序排列，那么添加：

chart.sort("asc");

下面是一個(gè)完整樣例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script>
    <style type="text/css">   
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
 
    <script>
 
      anychart.onDocumentReady(function () {
 
        // create the data
        var dataSet = [
          {name: "Galaxies", children: [
            {name: "Elliptical", children: [
              {name: "IC 1101", value: 4000000},
              {name: "Hercules A", value: 1500000},
              {name: "A2261-BCG", value: 1000000},
              {name: "ESO 306-17", value: 1000000},
              {name: "ESO 444-46", value: 402200},
            ]},
            {name: "Spiral", children: [  
              {name: "Rubin's Galaxy", value: 832000},
              {name: "Comet Galaxy", value: 600000},
              {name: "Condor Galaxy", value: 522000},
              {name: "Tadpole Galaxy", value: 280000},
              {name: "Andromeda Galaxy", value: 220000} 
            ]}
          ]}
        ];

        // create the treemap chart and set the data
        var chart = anychart.treeMap(dataSet, "as-tree");
 
        // set the chart title
        chart.title("The 10 Largest Galaxies in the Known Universe");

        // set a custom color scale
        var customColorScale = anychart.scales.linearColor();
        customColorScale.colors(['#37B8F7', '#ffcc00']);
        chart.colorScale(customColorScale);
        chart.colorRange().enabled(true);
        chart.colorRange().length('90%');

        // format the labels
        chart.labels().useHtml(true);
        chart.labels().format(
          "<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}"
        );
  
        // format the tooltips
        chart.tooltip().format(
          "Scale: {%value} light years"
        );

        // sort in ascending order
        chart.sort("asc");
 
        // set the container id for the chart
        chart.container("container");
 
        // initiate drawing the chart
        chart.draw();
 
      });
 
    </script>
  </body>
</html>

以上就是利用JavaScript構(gòu)建樹形圖的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript樹形圖的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: