?圖表控件AnyChart教程：使用 JavaScript 構(gòu)建詞樹圖

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

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

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

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

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

點擊下載AnyChart最新版

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

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

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

圖表控件AnyChart教程：使用 JavaScript 構(gòu)建詞樹圖

制作一個基本的 JavaScript 詞樹

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

創(chuàng)建一個 HTML 頁面。
包括所需的 JavaScript 文件。
準備數(shù)據(jù)。
為圖表添加一些 JS 代碼。

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

第一步是創(chuàng)建一個 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>

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

2. 包含所需的 JavaScript 文件

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

我將<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. 準備數(shù)據(jù)

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

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

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

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

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

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

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

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

var chart = anychart.wordtree(text);

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

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

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

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

// 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. 格式化連接器

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

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

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

圖表控件AnyChart教程：使用 JavaScript 構(gòu)建詞樹圖

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

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

2. 設(shè)置字體大小和顏色

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

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

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

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

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

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

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

<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>

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

// 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相關(guān)資源，請點擊此處進行查看~ 想要購買AnyChart正版授權(quán)的朋友可以。

標簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

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