自定义外观 plotly.js 个图例

Question

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

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

如果显示所有 traces/y 轴也很好 -> 将最大宽度设置为保持 y 轴的容器，以便 plot/graph area/domain 始终至少占宽度的 70%（将 overflow:scroll 设置为 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)

切换图例链接以隐藏轨迹但保持图例按钮完好无损时，哪个属性会发生本机更改？

需要了解如何通过多 select 下拉菜单实现功能

Answer 1

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

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

文档中有一个 few examples 选项 select 可能对您的用例有所帮助。

Answer 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。

我现在采用的方法非常有效并且易于实施：

自定义外观 plotly.js 个图例

Customise looks plotly.js legends

javascript

css

angularjs

svg

plotly