如何使用 JavaScript 在AnyChart中构建词树图？

最新推荐文章于 2022-06-21 19:21:54 发布

Augenstern__zyx

最新推荐文章于 2022-06-21 19:21:54 发布

阅读量340

点赞数

文章标签： javascript 开发语言 ecmascript 数据分析数据架构

本文链接：https://blog.csdn.net/augenstern__zyx/article/details/120887413

版权

本文详细介绍了如何使用JavaScript和AnyChart库创建交互式的词树图，包括创建HTML页面、包含所需JS文件、准备数据和添加图表代码。教程以《小王子》文本为例，展示了自定义连接器样式、字体大小和颜色以及添加自定义钻取按钮的方法，帮助读者打造个性化的词树图。

摘要由CSDN通过智能技术生成

数据可视化不仅有助于交流洞察力，而且有助于数据探索。有很多不同的图表类型被广泛用于识别数据中的模式。较少使用的图表类型之一是Word Tree。这是一种非常有趣的可视化形式，在分析文本方面非常有效。现在，我将教你如何使用 JavaScript 快速创建漂亮的交互式单词树图。

单词树显示一组选定的单词如何通过分支布局与文本数据中的其他单词相连。这些图表类似于词云，其中出现频率更高的词显示得更大。但它们的不同之处在于，词树还显示了词之间的联系，这增加了上下文并有助于找到模式。

在本教程中，我将根据法国飞行员兼作家 Antoine de Saint-Exupéry 的着名书籍《小王子》的文本创建一个可爱的词树。查看下面最终图表的演示并继续阅读以了解如何轻松构建此和任何其他交互式 JS 单词树。

制作一个基本的 JavaScript 词树

1. 创建一个 HTML 页面

2. 包含所需的 JavaScript 文件

图表控件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="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://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 wi

最低0.47元/天解锁文章

Augenstern__zyx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用 JavaScript 在AnyChart中构建词树图？

数据可视化不仅有助于交流洞察力，而且有助于数据探索。有很多不同的图表类型被广泛用于识别数据中的模式。较少使用的图表类型之一是Word Tree。这是一种非常有趣的可视化形式，在分析文本方面非常有效。现在，我将教你如何使用 JavaScript 快速创建漂亮的交互式单词树图。单词树显示一组选定的单词如何通过分支布局与文本数据中的其他单词相连。这些图表类似于词云，其中出现频率更高的词显示得更大。但它们的不同之处在于，词树还显示了词之间的联系，这增加了上下文并有助于找到模式。在本教程中，我将根据法国飞..
复制链接

扫一扫