图表控件AnyChart教程：使用 JavaScript 构建词树图

翻译|使用教程|编辑：张莹心|2021-10-21 09:54:28.067|阅读 140 次

概述：在本教程中，我将根据法国飞行员兼作家 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="//cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="//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="//code.jquery.com/jquery-latest.min.js"></script>

现在所有的初步步骤都完成了，让我们进入主要部分。您一定会喜欢使用如此少的 JavaScript 代码行可以如此快速地制作功能性交互式单词树图。

4.为图表添加一些JS代码

在编写任何代码之前，我做的第一件事是添加一个封闭函数，该函数仅在页面准备好后才执行其中的代码，然后使用 Ajax 加载数据文件。

anychart.onDocumentReady(function () {
  $.ajax(
"//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="//cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-wordtree.min.js"></script>
    <script src="//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(
"//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="//cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-wordtree.min.js"></script>
    <script src="//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(
"//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@pclwef.cn

上一篇：ActiveReports报表实战应用教程（七）——交互式报表之动态过滤下一篇：Dynamic .NET TWAIN开发实现语言汉化的方法分享与源码下载