?圖表控件AnyChart教程：使用 JavaScript 構建詞樹圖

翻譯|使用教程|編輯：張瑩心|2021-10-21 09:54:28.067|閱讀 235 次

概述：在本教程中，我將根據法國飛行員兼作家 Antoine de Saint-Exupéry 的著名書籍《小王子》的文本創建一個可愛的詞樹。查看下面最終圖表的演示并繼續閱讀以了解如何輕松構建此和任何其他交互式 JS 單詞樹。

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

AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。

點擊下載AnyChart最新版

數據可視化不僅有助于交流洞察力，而且有助于數據探索。有很多不同的圖表類型被廣泛用于識別數據中的模式。較少使用的圖表類型之一是Word Tree。這是一種非常有趣的可視化形式，在分析文本方面非常有效。現在，我將教你如何使用 JavaScript 快速創建漂亮的交互式單詞樹圖。

單詞樹顯示一組選定的單詞如何通過分支布局與文本數據中的其他單詞相連。這些圖表類似于詞云，其中出現頻率更高的詞顯示得更大。但它們的不同之處在于，詞樹還顯示了詞之間的聯系，這增加了上下文并有助于找到模式。

在本教程中，我將根據法國飛行員兼作家 Antoine de Saint-Exupéry 的著名書籍《小王子》的文本創建一個可愛的詞樹。查看下面最終圖表的演示并繼續閱讀以了解如何輕松構建此和任何其他交互式 JS 單詞樹。

圖表控件AnyChart教程：使用 JavaScript 構建詞樹圖

制作一個基本的 JavaScript 詞樹

交互式 JS 單詞樹圖可能看起來很復雜。但是請繼續學習如何通過四個非常簡單的步驟來構建它。

創建一個 HTML 頁面。
包括所需的 JavaScript 文件。
準備數據。
為圖表添加一些 JS 代碼。

1. 創建一個 HTML 頁面

第一步是創建一個 HTML 頁面來保存圖表。在頁面中，添加一個<div>帶有 id的元素，稍后將引用該元素。

<html>
  <head>
    <title>JavaScript Word Tree 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>

要使單詞樹占據整個頁面，請將寬度和高度參數指定為 100%。這可以根據您的項目要求進行調整。

2. 包含所需的 JavaScript 文件

使用JavaScript 圖表庫來創建單詞樹很方便。使用此類庫的最佳部分是無需高級技術技能即可快速制作開箱即用的圖表。在本教程中，我將根據AnyChart的word 樹文檔使用它。它可以免費用于非商業用途，但無論如何，這只是一個示例。所有 JS 圖表庫的數據可視化邏輯都非常相似。因此，基本上，您也可以使用這種學習與其他具有預先構建的詞樹的人一起創建圖表。

我將<head>在 HTML 頁面的部分中包含來自 AnyChart 的 CDN 所需的 JS 文件。對于單詞樹圖，我需要添加兩個腳本：核心模塊和單詞樹模塊。

<html>
  <head>
    <title>JavaScript Word Tree Chart</title>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-wordtree.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>
      // All the code for the JS word tree chart will come here
    </script>
  </body>
</html>

3. 準備數據

我從在線圖書館下載了Antoine de Saint-Exupéry的名著《小王子》的文本，并創建了數據文件，您可以在此處下載。

要訪問數據文件，我需要 jQuery，因此在代碼中包含它的腳本。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

現在所有的初步步驟都完成了，讓我們進入主要部分。您一定會喜歡使用如此少的 JavaScript 代碼行可以如此快速地制作功能性交互式單詞樹圖。

4.為圖表添加一些JS代碼

在編寫任何代碼之前，我做的第一件事是添加一個封閉函數，該函數僅在頁面準備好后才執行其中的代碼，然后使用 Ajax 加載數據文件。

anychart.onDocumentReady(function () {
  $.ajax(
"http://gist.githubusercontent.com/shacheeswadia/ccbccc482b1fb691405e07772c0fbfa0/raw/fb7b5972838b4212f4551c4cc9d5fc026fc2e8c3/littleprince.txt"
  ).done(function (text) {
  });
});

接下來，我使用wordtree()JS庫的功能創建圖表。

var chart = anychart.wordtree(text);

在詞樹中，一個重要的部分是定義分支到文本中各個句子的詞根。在這里，我將“The”定義為詞根的開頭，并深入到“prince”作為詞根的結尾，這樣組合詞根就變成了“小王子”。

// set the root word
chart.word("The");

// drill down to the next word in the tree
chart.drillTo("prince");

最后，我只需要設置容器并繪制圖表。

// set container id for the chart
chart.container("container");

// initiate chart drawing
chart.draw();

您可以使用以下代碼或在CodePen [或在AnyChart Playground ]上查看JS 單詞樹圖的初始版本。

<html>
  <head>
    <title>JavaScript Word Tree Chart</title>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-wordtree.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.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 () {
        $.ajax(
"http://gist.githubusercontent.com/shacheeswadia/ccbccc482b1fb691405e07772c0fbfa0/raw/fb7b5972838b4212f4551c4cc9d5fc026fc2e8c3/littleprince.txt"
        ).done(function (text) {
    
          // create word-tree chart
          var chart = anychart.wordtree(text);

          // set the root word
          chart.word("The");

          // drill down to the next word in the tree
          chart.drillTo("prince");

          // set container id for the chart
          chart.container("container");

          // initiate chart drawing
          chart.draw();

        });
      });
    </script>
  </body>
</html>

這看起來很棒，但還有很多事情可以做，讓這個詞樹看起來更漂亮，我會告訴你如何做到這一點。

自定義 JS Word 樹形圖

JS 圖表庫非常適合快速準備基本的視覺效果，然后提供大量自定義圖表的選項。讓我向您展示如何使這個詞樹更加美觀和個性化。

1. 格式化連接器

我們的單詞樹的分支看起來有點壓扁，所以讓我們修改它們以使樹看起來更加間隔。有一個選項可以制作直線連接器，我會嘗試并更改筆劃設置。

// configure the connectors
var connectors = chart.connectors();
connectors.length(100);
connectors.offset(10);
connectors.curveFactor(0);
connectors.stroke("0.5 #96a6a6");

這一切都非常簡單，這是我們的單詞樹僅通過這些更改的樣子。

圖表控件AnyChart教程：使用 JavaScript 構建詞樹圖

CodePen [和AnyChart Playground ] 上提供了交互式版本，您還可以在其中找到其完整代碼。

說實話，我更喜歡彎曲的連接器，所以我繼續修復它們。

2. 設置字體大小和顏色

我只是修改了字體大小和顏色，使圖表更加個性化。同樣，它非常簡單，只需要幾行代碼。

// configure the font
chart.fontColor("#1976d2");

// set chart's font size minimum and maximum
chart.minFontSize(8);
chart.maxFontSize(24);

3. 添加自定義向下鉆取和向上鉆取按鈕

您是否注意到單詞樹中默認的向上和向下鉆取有多棒？只需單擊一個詞，圖表就會自動縮放到該級別。

內置功能非常強大，但如果需要，我將在此處向您展示如何添加一個按鈕以向下鉆取特定單詞，以及如何添加一個按鈕以一次向上鉆取一個級別。

我在 HTML 中創建了一個容器并在其中添加了兩個按鈕——一個用于深入到我選擇的單詞“失望”，一個用于向上鉆取。您當然可以選擇樹中存在的任何單詞。

<div id="buttons">
  <button onclick="drillToItem()">Drill Down to "disappointed"</button>
  <button onclick="drillUpALevel()">Drill Up 1 Level</button>
</div>

我還為按鈕添加了樣式。

<style type="text/css">
  html,
  body,
  #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  button {
    width: 15vw;
    margin: 1rem;
  }
</style>

接下來，我添加了兩個函數，一個用于處理向下鉆取到指定單詞的操作，另一個用于向上鉆取樹的一層。

// drill down to a data item
function drillToItem() {
  // locate an item in the data tree and get it as an object
  var item = chart.data().search("value", "disappointed");
  // drill down to the item
  chart.drillTo(item);
}

// drill up a level
function drillUpALevel() {
  chart.drillUp();
}

在此處或CodePen [或AnyChart Playground ]上查看這個很棒的最終 JavaScript 單詞樹圖的完整代碼。

<html>
  <head>
    <title>JavaScript Word Tree Chart</title>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-wordtree.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      }
      #buttons{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
      button {
        width: 15vw;
        margin: 1rem;
      }
    </style>
  </head>
  <body>  
    <div id="buttons">
      <button onclick="drillToItem()">Drill Down to "disappointed"</button>
      <button onclick="drillUpALevel()">Drill Up 1 Level</button>
    </div>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        $.ajax(
"http://gist.githubusercontent.com/shacheeswadia/ccbccc482b1fb691405e07772c0fbfa0/raw/fb7b5972838b4212f4551c4cc9d5fc026fc2e8c3/littleprince.txt"
        ).done(function (text) {
    
          // create word-tree chart
          var chart = anychart.wordtree(text);

          // set the root word
          chart.word("The");

          // drill down to the next word in the tree
          chart.drillTo("prince");

          // configure the connectors
          var connectors = chart.connectors();
          connectors.length(100);
          connectors.offset(10);
          connectors.stroke("0.5 #96a6a6");

          // configure the font
          chart.fontColor("#1976d2");

          // set chart's font size minimum and maximum
          chart.minFontSize(8);
          chart.maxFontSize(24);

          // set container id for the chart
          chart.container("container");

          // initiate chart drawing
          chart.draw();

        });
      });

      var chart;

      // drill down to a data item
      function drillToItem() {
        // locate an item in the data tree and get it as an object
        var item = chart.data().search("value", "disappointed");
        // drill down to the item
        chart.drillTo(item);
      }

      // drill up a level
      function drillUpALevel() {
        chart.drillUp();
      }

    </script>
  </body>
</html>

更多AnyChart相關資源，請點擊此處進行查看~ 想要購買AnyChart正版授權的朋友可以。

標簽：

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn

上一篇：ActiveReports報表實戰應用教程（七）——交互式報表之動態過濾下一篇：Dynamic .NET TWAIN開發實現語言漢化的方法分享與源碼下載