点击下载Anychart最新试用版

Treemap是用于分层数据可视化的流行图表类型。在本次教程中将向您展示只需四个简单的步骤，如何使用JavaScript创建一个很酷的交互式树图图表。每个至少对HTML5编码有一点熟悉的人都会喜欢这种呈现的简单方法来制作漂亮的JavaScript树形图，这些图表非常适合嵌入到任何网页或应用程序中。

如何创建JavaScript Treemap图表

首先，这是一个基本的东西，你应该清楚地理解和记住。在使用JavaScript进行数据可视化时，图表通常需要四个主要步骤：

1. 首先，创建一个带有图表容器的HTML页面。

2. 其次，连接您需要的所有脚本。

3. 第三，加载可视化所需的数据。

4. 最后，编写JS图表代码。

现在，让我们深入研究这些步骤，以简化一流的JavaScript图表并构建一个非常棒的树图。

第1步：创建HTML页面

在您真正开始绘制树形图表之前，请创建一个将放置可视化文件的HTML页面。

      My First JavaScript Treemap Chart

这里最重要的部分是，  

第3步：加载数据

现在我们已经为树形图图形可视化（步骤1）准备了一个位置并引用了JS图表库脚本（步骤2），所有这些都被设置为实质 - 加载数据（步骤3）并实际绘制它树图（步骤4）。

AnyChart JS库允许Web开发人员从多种方式中选择数据。要创建树形图图表，必须应用树数据模型，将数据组织为树，表格或CSV字符串。

在这种情况下，将数据组织为树，每个父项都提供了包含子项数组的子数据字段：

var data = [
  {name: "World", children: [
    {name: "Asia", children: [
      {name: "East", value: 1000},
      {name: "Southern", value: 803},
      {name: "Southeast", value: 415},
      {name: "Western", value: 182},
      {name: "Central", value: 36}
    ]},
    {name: "America", children: [
      {name: "North", value: 346},
      {name: "South", value: 316},
      {name: "Central", value: 114},
      {name: "Caribbean", value: 23}
    ]},
    {name: "Europe", children: [
      {name: "Eastern", value: 233},
      {name: "Western", value: 183},
      {name: "Southern", value: 135},
      {name: "Northern", value: 100}
    ]},
    {name: "Africa", children: [
      {name: "Western", value: 158},
      {name: "Eastern", value: 140},
      {name: "Northern", value: 121},
      {name: "Southern", value: 34},
      {name: "Middle", value: 20}
    ]},
    {name: "Oceania", children: [
      {name: "Oceania", value: 29}
    ]}
  ]}
];

第4步：编写JS树形图图表

现在，让我们编写可视化代码。

整个JS图表代码必须包含在标记anychart.onDocumentReady()内的函数中

其次，添加步骤3中的数据和命令以创建数据树：

anychart.onDocumentReady(function() {
  // create data
  var data = [
    {name: "World", children: [
      {name: "Asia", children: [
        {name: "East", value: 1000},
        {name: "Southern", value: 803},
        {name: "Southeast", value: 415},
        {name: "Western", value: 182},
        {name: "Central", value: 36}
      ]},
      {name: "America", children: [
        {name: "North", value: 346},
        {name: "South", value: 316},
        {name: "Central", value: 114},
        {name: "Caribbean", value: 23}
      ]},
      {name: "Europe", children: [
        {name: "Eastern", value: 233},
        {name: "Western", value: 183},
        {name: "Southern", value: 135},
        {name: "Northern", value: 100}
      ]},
      {name: "Africa", children: [
        {name: "Western", value: 158},
        {name: "Eastern", value: 140},
        {name: "Northern", value: 121},
        {name: "Southern", value: 34},
        {name: "Middle", value: 20}
      ]},
      {name: "Oceania", children: [
        {name: "Oceania", value: 29}
      ]}
    ]}
  ];
  // create a data tree
  treeData = anychart.data.tree(data, "as-tree");
});

第三，添加以下行以基于数据树创建树形图图表：

var chart = anychart.treeMap(treeData);

第四，命名图表以清楚显示图形上显示的内容：

chart.title("Internet Audience Worldwide (in million users)");

最后，命令在容器中绘制树形图：

// set the container id

chart.container("container");// draw the chart

chart.draw();

查看刚使用JavaScript构建的交互式树形图表！

结果：使用JavaScript构建的树形图表

请注意，默认情况下，树形图图表带有预先确定的视觉设计和交互设置。特别是，它具有令人敬畏的向下钻取行为：当您单击数据点时，您可以深入查看其子项。要返回并向上钻取更高级别，请单击标题。

=====================================================

这就是使用JavaScript创建一个交互式树图图表的过程，是不是非常简单易学呢？赶快下载或打开Anychart尝试一下吧~

想要购买Anychart正版授权的朋友可以咨询慧都官方客服。

有关产品资讯的更多精彩内容，欢迎关注下方的微信公众号，及时获取产品信息▼▼▼