使用JavaScript构建树形图

树形图可视化广泛用于分层数据分析。使用树形如果你没有经验还想创建一个，构建那将会有些复杂。使用树形下面是构建一个详细教程，教你如何使用JavaScript创建交互式树形图。使用树形

宇宙中只有我们吗？构建我们每个人都曾在某个时候问过自己这个问题。当我们在考虑地球是使用树形否是宇宙中唯一可居住的行星时，我们可能会思考宇宙究竟有多大。构建让我们在树形图的使用树形帮助下看看吧！在本教程中，构建我们将使用树形映射出宇宙中已知的使用树形10个最大的星系。

什么是构建树形图？

在进入教程之前，了解一下树形图的使用树形概念。树形图是构建一种流行的技术，用于将分层组织、使用树形树状结构的数据可视化。它可以一目了然地展示出层次结构以及各个数据点的值，它使用了大小与相应数量成比例的嵌套矩形。

树的源码下载每个分支都是一个矩形，对于子分支，其中嵌套了较小的矩形。通过颜色和接近度显示数据，树形图可以轻松表示大量数据，同时有效利用空间，非常适合比较层次结构中的比例。

树形图类型是由Ben Shneiderman教授发明的，他在信息设计和人机交互领域作出了重大贡献。树形图被用于许多数据可视化领域，可用于分析股票市场、人口普查系统和选举统计数据，以及数据新闻、硬盘探索工具等。

浏览JS树形图

下面将使用JavaScript构建一个树形图来比较已知宇宙中排名前10的星系的大小。JS树状图在本教程结束时的样子：

创建一个基本的JS树形图

创建基于JavaScript的树状图通常需要以下四个基本步骤：

1. 创建一个HTML页面

2. 参考JavaScript文件

3. 设置数据

4. 编写一些JS树代码

如果你是 HTML、CSS 和JavaScript方面的新手，请不要担心。本文将详细介绍每一步，在学习完本教程之后，香港云服务器你可以尝试去做自己的JS树状图。

1. 创建一个HTML页面

首先需要创建一个基本的HTML页面。添加一个HTML块元素 (<div>)，并将树形图放置其中，为其分配一个ID属性（让它成为“容器”），以便稍后在代码中引用它。

然后为 <div> 设置一些样式。将宽度和高度属性定义为 100%，边距和填充为 0。当然，你可以根据自己的喜好进行更改。

html, body, #container {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

anychart.onDocumentReady(function () {

// create the data

var dataSet = [

{ name: "Galaxies", children: [

{ name: "Elliptical", children: [

{ name: "IC 1101", value: 4000000},

{ name: "Hercules A", value: 1500000},

{ name: "A2261-BCG", value: 1000000},

{ name: "ESO 306-17", value: 1000000},

{ name: "ESO 444-46", value: 402200},

]},

{ name: "Spiral", children: [

{ name: "Rubins Galaxy", value: 832000},

{ name: "Comet Galaxy", value: 600000},

{ name: "Condor Galaxy", value: 522000},

{ name: "Tadpole Galaxy", value: 280000},

{ name: "Andromeda Galaxy", value: 220000}

]}

]}

];

// create the treemap chart and set the data

var chart = anychart.treeMap(dataSet, "as-tree");

// set the chart title

chart.title("The 10 Largest Galaxies in the Known Universe");

// set a custom color scale

var customColorScale = anychart.scales.linearColor();

customColorScale.colors([#37B8F7, #ffcc00]);

chart.colorScale(customColorScale);

chart.colorRange().enabled(true);

chart.colorRange().length(90%);

// format the labels

chart.labels().useHtml(true);

chart.labels().format(

"{ %name}{ %value}"

);

// format the tooltips

chart.tooltip().format(

"Scale: { %value} light years"

);

// sort in ascending order

chart.sort("asc");

// set the container id for the chart

chart.container("container");

// initiate drawing the chart

chart.draw();

});

</html>

结论​

恭喜现在已经学会了轻松地创建出色的交互式JavaScript树形图！请参阅树形图文档，以便了解它还可以做些什么，或者使用不同的图表库。

译者介绍​

翟珂，51CTO社区编辑，目前在杭州从事软件研发工作，做过电商、征信等方面的系统，享受分享知识的过程，充实自己的生活。

原文标题：​​How to Build a Treemap Using JavaScript​​，作者：Awan Shrestha

源码库

很赞哦!（8959）