这篇“如何利用JavaScript构建树形图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何利用JavaScript构建树形图”文章吧。在进入教程之前，了解一下树形图的概念。树形图是一种流行的技术，用于将分层组织、树状结构的数据可视化。它可以一目了然地展示出层次结构以及各个数据点的值，它使用了大小与相应数量成比例的嵌套矩形。树的每个分支都是一个矩形，对于子分支，其中嵌套了较小的矩形。通过颜色和接近度显示数据，树形图可以轻松表示大量数据，同时有效利用空间，非常适合比较层次结构中的比例。树形图类型是由Ben Shneiderman教授发明的，他在信息设计和人机交互领域作出了重大贡献。树形图被用于许多数据可视化领域，可用于分析股票市场、人口普查系统和选举统计数据，以及数据新闻、硬盘探索工具等。下面将使用JavaScript构建一个树形图来比较已知宇宙中排名前10的星系的大小。JS树状图在本教程结束时的样子：创建基于JavaScript的树状图通常需要以下四个基本步骤：1.创建一个HTML页面2.参考JavaScript文件3.设置数据4.编写一些JS树代码如果你是 HTML、CSS 和JavaScript方面的新手，请不要担心。本文将详细介绍每一步，在学习完本教程之后，你可以尝试去做自己的JS树状图。首先需要创建一个基本的HTML页面。添加一个HTML块元素 (然后为 接下来，需要引用所需脚本，用这些脚本创建树形图。现在有多个JavaScript图表库可供选择。创建交互式数据可视化的基本步骤与它们中的任何一个都是差不多的。在这里，为了说明问题，我将使用AnyChart，它支持树形图并有免费版本，其源代码在GitHub上开放。因此，要构建树形图，需要导入“核心”和“树形图”模块。在第一步创建的HTML页面的 head 部分中引用它们。从 CDN 获取它们（或下载文件）。设置数据后将把已知宇宙中最大的前10个星系的规模可视化。这些星系非常庞大，所以需要以它们的直径来衡量它们是多少光年（光年是一束光在一个地球年中传播的距离，相当于大约 6 万亿英里）。我已经从 Largest.org 获取了星系尺度的数据。对于图表，树结构数据根级元素是“星系”，（按星系类型）分为“椭圆”和“螺旋”作为其子元素，它们又有个别星系对象的数组作为它们自己的子元素。每个星系对象都具有键值属性。例如，{name: “IC 1101”, value: 4000000} 表示规模为 4,000,000 光年的 IC 1101 星系。说实话，很难理解它有多大。到此只需几行JavaScript代码就可以为树形图提供动力。1.使用anychart.onDocumentReady() 函数，加载树形图的所有JavaScript代码，确保它在网页完全加载并准备执行。2.然后，从第3步开始在树形图中添加我们想要可视化的数据。3.添加以下代码将数据转换到图上。4.添加一个标题，将图表放入之前定义的 现在JS树形图基本上已经准备好了：加载树形图时，只会显示两个图块，“椭圆”和“螺旋”。然后可以单击它们，展开其各自的子星系，这就是所谓的下钻操作。为什么会只有两块？因为默认情况下，最大深度值设置为1。这意味着一次只能看到其父级的一个级别。较低的级别是隐藏的。在第一层，将“星系”分为“椭圆”和“螺旋”，所以只能看到这一层。显示所有星系图块只需要使用maxDepth()函数更改最大深度值。效果如下：在这张图表中，可以看到星系是如何根据层次结构进行分组的，还可以单击顶部的“椭圆”或“螺旋”标题来放大其子星系。完整代码：现在，你可以一目了然地看到10个最大星系的规模并进行比较。下面展示如何自定义JavaScript树形图。改变任何图表的外观和感觉有一种简单方法就是更改颜色。添加了fill()和hashFill()方法来更改树形图的颜色。在树形图中，除了大小，图块的颜色也有助于突出显示比例。可以借助线性色标根据相应的数据维度自动为图块着色。创建一个线性色标，为其提供两个值，一个为最低范围值，另一个为最高值，最后启用颜色范围。实现这些需要修改上一节中的代码。可以使用HTML来格式化标签。为此，需要为标签启用 HTML。然后，你就可以不受限制地使用HTML对它们进行格式化。可以把标签格式化为HTML元素，并对其进行样式设计，以增加字体大小和改变颜色。正如你在上面的代码片段中看到的，还使用了{%name}和{%value}标记，用来更改树形图标签和工具提示的文本。这样，在创建可视化时将为每个星系输出名称和比例值。此外，使用format()方法来定制工具提示的文本。一个内容丰富的工具提示有助于更好地理解数据。默认情况下，树形图图块按降序排列。可以看到星系是从高到低排列的，规模最大的IC 1101星系是左起第一个。如果需要升序排列，那么添加：下面是一个完整样例：以上就是关于“如何利用JavaScript构建树形图”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注百云主机行业资讯频道。免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉免费云主机域名及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
本文小编为大家详细介绍“php怎么以免费云主机域名post形式发送xml”，内容详细，步骤清晰，细节处理妥当，希望这篇“php怎么以post形式发送xml”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。读到这里，这篇“php怎么以po…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
