自定义看起来plotly.js传说

Question

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

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

如果显示所有迹线/ y轴也很好 - ＆gt;将最大宽度设置为包含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)

当设置图例链接以隐藏跟踪但保留其图例按钮时，本机更改了哪个属性？

需要知道通过多选下拉列表实现功能

Answer 1

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

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

文档有few examples，可能对您的用例选项有用。

Answer 2

解 使用下拉元素的形式，而不是使用显示我们设置为false的有限图例框：

$scope.layout = {showlegend:false};

我使用AngularJS Dropdown Multiselect作为ng模型的setter，它们包含布局的可变元素或图形的跟踪对象的值。

例如，当隐藏第一个y轴时：

$scope.layout.yaxis.showticklabels = false;

关于下拉列表的ng模型的更改，我更新了跟踪和布局属性，例如将一个跟踪数组设置为循环中可见：

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

关于更改 - ＆gt;更新情节画...

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

我现在所遵循的方法非常有效且易于实施：