plotly subplot plotly绘制图表

本文旨在帮助开发者理解并如何使用 Plotly.js 库创建 Treemap，重点讲解如何通过标签和父级配置 Treemap 的系统结构。通过命令的示例代码和详细的解释，读者能够轻松地创建自定义的 Treemap 图，并根据需求调整其系统关系。理解 Plotly.js Treemap 的数据结构

Plotly.js 的 Treemap图使用一种特定的数据结构来定义系统关系。结构依赖于这种关键的集群：标签和父节点。标签集群包含了Treemap中所有节点的父节点，而父集群则定义了每个节点的父节点。理解这两个集群之间的关系是创建集群Treemap的关键。标签集群：定义所有节点

标签集群是一个集群集群，它包含了Treemap中所有需要显示的节点名称。节点的顺序不重要，重要的是父节点吞吐量中对应的元素能够正确地指向其父节点。

例如，如果我们想要创建一个包含 "root"、"topItem"、"one"、"two"、"三"、"something"、"thing" 和 "whatever" 这些节点的Treemap，标签吞吐量应该如下所示：labels： [quot；rootquot；， quot；topItemquot；， quot；onequot；， quot；twoquot；， quot；三quot；， quot；somethingquot；， quot；thingquot；， quot；whateverquot；]登录后复制parents集群：定义关系

parents 集群与标签 集群一一对应，用于每个定义节点的父节点。parents 集群中的每个元素都是一个字符串，表示对应标签 集群中节点的父节点名称。对于根节点（没有父节点），parents 集群中对应的元素应该为空字符串“”。

继续上面的例子，如果我们想要构建下面的系统关系：“root”是根节点“topItem”是“root”的子节点“one”、“two”和“三”是“topItem”的子节点“something”是“one”的子节点“thing”和“whatever”是“two”的子节点

那么parents排序应该如下所示：parents：[quot；quot；， ”root”；，“topItem”；，“topItem”，“topItem”；，“one”；，“two”；，“two”；]登录后复制

注意：Copilot

Copilot是由微软公司开发的一款AI生产力工具，旨在通过先进的人工智能技术，帮助用户快速完成各种任务，提升工作效率。 63条详细信息parents[0] 是""，因为 "root" 是根节点。parents[1] 是 "root"，因为 "topItem" 的父节点是 "root"。parents[2]、parents[3] 和parents[4] 都是 "topItem"，因为 "one"、"two" 和 "third" 的父节点都是 "topItem"。parents[5] 是 "one"，因为 "something" 的父节点是 "one"。parents[6] 和parents[7] 都是 "two"，因为 "thing" 和 "whatever"的父节点都是“二”。

完整示例代码

将标签和父级数据库组合在一起，就可以创建一个完整的 Plotly.js Treemap 图：lt；!DOCTYPE htmlgt；lt；htmlgt；lt；headgt； lt；titlegt；Plotly Treemap Examplelt；/titlegt； lt；script src="https：//cdn.plot.ly/plotly-2.20.0.min.js"gt；lt；/scriptgt；lt；/headgt；lt；bodygt；lt；div id='chart'gt；lt；/divgt； lt；scriptgt； const data = [{ 类型： "treemap"，标签： [quot；rootquot；， quot；topItemquot；， quot；onequot；， quot；twoquot；， “三”，“某事”，“事”，“无论如何”；]，父母：[“”“；，“根”；，“顶部项目”；， quot；topItemquot；， quot；topItemquot；， quot；onequot；， quot；twoquot；， quot；twoquot；] }]； Plotly.newPlot('chart'， data)； lt；/scriptgt；lt；/bodygt；lt；/htmlgt；登录后复制

将以上代码保存为HTML文件并在浏览器中打开，就可以看到生成的Treemap图中。除了添加数值信息

，Treemap通常还需要显示每个节点对应的数值信息。这可以通过values数组来实现。values数组与labels数组一一对应，表示每个节点的值。

例如，我们可以为上面的例子添加随机一些的数值：const data = [{ type： "treemap"， labels： [quot；rootquot；， quot；topItemquot；， quot；onequot；， “二”，“三”，“某事”，“某事”，“无论如何”]，家长： [quot；quot；，quot；rootquot；，quot；topItemquot；，quot；topItemquot；，quot；topItemquot；，quot；onequot；，quot；twoquot；，quot；twoquot；]，values：[0, 10, 5, 7, 3, 6, 4, 2] // 模拟的数值}]；登录复制

注意：根节点的数值通常设置为0。总结

通过标签和父级缓存，我们可以灵活地定义 Plotly.js Treemap 图的体系结构。

结合数值缓存，我们可以展示每个节点的数值信息，从而创建更丰富、更有意义的树状图。理解两个备份的意义以及它们之间的关系，是使用 Plotly.js 创建自定义树状图的关键。在实际应用中，可以根据具体的数据结构和可视化需求，调整标签、父项和值的缓存，从而创建出满足特定需求的树状图。

以上就是使用 Plotly.js 树状图图：理解字符串结构的配置的详细内容，更多请关注乐哥常识网其他相关文章！ 相关标签： html js 浏览器 字符串数组 htmlplotly 字符串数据结构 JS