使用 Plotly.js 创建 Treemap：理解层级结构-js教程-PHP中文网

使用 Plotly.js 创建 Treemap：理解层级结构

碧海醫心

发布： 2025-09-08 20:42:02

原创

635人浏览过

使用 plotly.js 创建 treemap：理解层级结构

Treemap 是一种可视化分层数据的有效方式。Plotly.js 提供了强大的 Treemap 功能，但理解其数据结构对于有效地使用它至关重要。本文将解释如何使用 labels 和 parents 数组在 Plotly.js 中定义 Treemap 的层级结构，并提供示例代码帮助您快速上手。

理解 labels 和 parents 数组

Plotly.js 的 Treemap 通过两个关键数组 labels 和 parents 来定义层级关系。labels 数组包含所有要显示的节点名称，而 parents 数组则指定每个节点的父节点。这两个数组的顺序至关重要，parents[i] 对应于 labels[i] 的父节点。

labels: 包含 Treemap 中所有节点的名称。这些名称将显示在 Treemap 的各个区块中。
parents: 包含对应于 labels 数组中每个节点的父节点的名称。根节点的父节点通常设置为空字符串 ""。

构建 Treemap 数据

为了更好地理解 labels 和 parents 的关系，我们以一个 JSON 结构为例，将其转换为 Plotly.js Treemap 所需的数据格式。假设我们有以下 JSON 数据：

{
    "root": { "topItem" },
    "topItem": { "one", "two", "three" },
    "one": { "something" },
    "two": { "thing", "whatever" }
}

登录后复制

首先，我们需要将所有节点名称提取到 labels 数组中：

const labels = ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"];

登录后复制

接下来，我们需要确定每个节点的父节点，并将其添加到 parents 数组中。注意，根节点 "root" 没有父节点，所以其对应的 parents 值为 ""。

小艺

华为公司推出的AI智能助手

549

查看详情

const parents = ["", "root", "topItem", "topItem", "topItem", "one", "two", "two"];

登录后复制

现在，我们已经准备好了构建 Treemap 所需的数据。

Plotly.js 代码示例

以下代码展示了如何使用 labels 和 parents 数组在 Plotly.js 中创建 Treemap：

<!DOCTYPE html>
<html>
<head>
  <title>Plotly Treemap Example</title>
  <script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
</head>
<body>
  <div id='chart'></div>

  <script>
    const data = [{
      type: "treemap",
      labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"],
      parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two" ]
    }];

    Plotly.newPlot('chart', data);
  </script>
</body>
</html>

登录后复制

这段代码首先引入 Plotly.js 库，然后在 HTML 页面中创建一个 div 元素，用于显示 Treemap。在 JavaScript 代码中，我们定义了 data 数组，其中包含了 type（设置为 "treemap"）、labels 和 parents 属性。最后，我们使用 Plotly.newPlot 函数将 Treemap 渲染到指定的 div 元素中。

注意事项

确保 labels 和 parents 数组的长度一致，否则会导致错误。
根节点的 parents 值必须为空字符串 ""。
parents 数组中的值必须是 labels 数组中已存在的节点名称。
Plotly.js 提供了丰富的配置选项，可以自定义 Treemap 的颜色、大小、层级显示等。请参考 Plotly.js 官方文档了解更多信息。

总结

通过本文的介绍，您应该已经掌握了使用 Plotly.js 创建 Treemap 的基本方法。理解 labels 和 parents 数组的含义是构建 Treemap 的关键。通过灵活运用这两个数组，您可以轻松地将分层数据可视化为清晰易懂的 Treemap。希望本文能够帮助您在数据可视化方面取得更大的进展。

以上就是使用 Plotly.js 创建 Treemap：理解层级结构的详细内容，更多请关注php中文网其它相关文章！