使用JavaScript构建树形图

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

现在JS树形图基本上已经准备好了：

加载树形图时，只会显示两个图块，“椭圆”和“螺旋”。然后可以单击它们，展开其各自的子星系，这就是所谓的下钻操作。

为什么会只有两块？因为默认情况下，最大深度值设置为1。这意味着一次只能看到其父级的一个级别。较低的级别是隐藏的。在第一层，将“星系”分为“椭圆”和“螺旋”，所以只能看到这一层。

显示所有星系图块只需要使用maxDepth()函数更改最大深度值。

chart.maxDepth(2);

效果如下：

在这张图表中，可以看到星系是如何根据层次结构进行分组的，还可以单击顶部的“椭圆”或“螺旋”来放大其子星系。

完整代码：

现在，你可以一目了然地看到10个最大星系的规模并进行比较。下面展示如何自定义JavaScript树形图。

自定义JS树形图

A. 改变颜色

改变任何图表的外观和感觉有一种简单方法就是更改颜色。

chart.normal().fill('#B46FC2');
chart.hovered().fill('#44008B', 0.8);
chart.selected().fill('#0A0068', 0.8);
chart.selected().hatchFill("forward-diagonal", '#282147', 2, 20);

添加了fill()和hashFill()方法来更改树形图的颜色。

B. 应用线性色标​

在树形图中，除了大小，图块的颜色也有助于突出显示比例。可以借助线性色标根据相应的数据维度自动为图块着色。​

创建一个线性色标，为其提供两个值，一个为最低范围值，另一个为最高值，最后启用颜色范围。​

var customColorScale = anychart.scales.linearColor();
customColorScale.colors(['#37B8F7', '#ffcc00']);
chart.colorScale(customColorScale);
chart.colorRange().enabled(true);
chart.colorRange().length('90%');

实现这些需要修改上一节中的代码。

C. 格式化标签和工具提示​

可以使用HTML来格式化标签。为此，需要为标签启用 HTML。然后，你就可以不受限制地使用HTML对它们进行格式化。​

可以把标签格式化为HTML元素，并对其进行样式设计，以增加字体大小和改变颜色。​

chart.labels().useHtml(true);
chart.labels().format(
  "{%name}
{%value}"
);

正如你在上面的代码片段中看到的，还使用了{%name}和{%value}标记，用来更改树形图标签和工具提示的文本。这样，在创建可视化时将为每个星系输出名称和比例值。​

此外，使用format()方法来定制工具提示的文本。一个内容丰富的工具提示有助于更好地理解数据。​

chart.tooltip().format(
    "Scale: {%value} light-years"
);

D. 按升序排列图块​

默认情况下，树形图图块按降序排列。可以看到星系是从高到低排列的，规模最大的IC 1101星系是左起第一个。​

如果需要升序排列，那么添加：​

chart.sort("asc");

下面是一个完整样例：​

结论​

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

译者介绍​

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

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