自定义外观 plotly.js 图例

Posted 2023-03-06

【中文标题】自定义外观 plotly.js 图例

【英文标题】：Customise looks plotly.js legends

【发布时间】：2016-06-12 07:27:31

【问题描述】：

我为每个创建的轨迹创建了一个独立的 y 轴。有时有很多轨迹/y 轴。

我希望在选项列表中包含具有相同本机功能的图例按钮：单击切换跟踪可见性。理想情况下，通过单击图例来隐藏轨迹时，它的 y 轴（刻度值）也将被隐藏。

如果显示所有迹线/y 轴也很好 -> 将最大宽度设置为容纳 y 轴的容器，以便绘图/图形区域/域始终占据至少 70% 的宽度（设置溢出：滚动到 y 轴容器）

我已经浏览了文档，但没有找到我需要的东西..

layout.showlegend = true/false -> hides/shows all the legend box
trace1.showlegend = true/false -> hides/shows one legend(for trace1) in the box

如果我这样做：

trace1.visible= false -> I hide both the trace and legend for it
trace1.opacity= 0 ->hides the trace not the legend for it but alters the legend icon(if line+dot -> only line)

在切换图例链接以隐藏跟踪但保持图例按钮不变时，哪个属性会原生更改？

需要知道通过多选下拉菜单实现功能

【问题讨论】：

介意解释为什么投反对票，以便在真的有必要时改进问题？？？

【参考方案1】：

在最新版本中添加了图例的自动 y 溢出 - 当有足够的图例项将图例推到绘图底部之外时，它将自动切换。

不幸的是，目前只有几种方法可以自定义图例的外观 - 背景颜色、边框颜色和字体。正在努力改进图例自定义和其中包含下拉菜单的能力，但由于使用混合 svg 和 html 时的限制，它在一段时间内仍不会完全实现 - plotly.js 有更高的优先级.

文档有一个few examples，它可能对您的用例有所帮助，并带有一个选项选择。

【讨论】：

谢谢你的评论，我原来的做法根本不对

【参考方案2】：

解决方案 使用一种下拉元素的形式，而不是使用我们设置为 false 的有限图例框：

$scope.layout = showlegend:false;

我使用 AngularJS Dropdown Multiselect 作为 ng-models 的设置器，用于保存布局的可变元素或图形的跟踪对象的值。

例如隐藏第一个y轴时：

$scope.layout.yaxis.showticklabels = false;

在更改下拉菜单的 ng-models 时，我会更新跟踪和布局属性，例如将跟踪数组设置为在循环中可见：

$scope.trace[i].visible = false;

关于更改 -> 更新绘图...

我的问题是我最初的想法是在更改图形对象的同时使用已经渲染的 svg。

我现在遵循的方法效果很好，很容易实现：

【讨论】：

能否分享代码，为轴添加黑色右边框？

我也遇到了同样的问题 - 您能否分享您的代码或提供更多详细信息？