javascript - 自定义plotly.js图例的外观

标签 javascript css angularjs svg plotly

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

我希望选项列表中的图例按钮具有相同的 native 功能:单击切换跟踪可见性。理想情况下,当通过单击图例隐藏迹线时,其 y 轴(刻度值)也将被隐藏。

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

enter image description here

我已经浏览了文档,但没有找到我需要的内容..

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)

当切换图例链接以隐藏跟踪但保持图例按钮完整时,哪个属性会本地更改?

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

最佳答案

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

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

文档有 few examples这可能对您使用选项选择的用例有所帮助。

关于javascript - 自定义plotly.js图例的外观,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35696479/

相关文章:

javascript - 我如何区分 AngularJS 中的 $ (jQuery) 和 $scope ?

javascript - Angular : one ng-click call the function twice why?

javascript - 如何在没有媒体查询的情况下使图像标签图像响应并使布局成为一个屏幕

html - 使用 html5 和 css3 的带有搜索图像的文本框

javascript - 如何使用 dropzone.js 收集数据 URI 内容?

javascript - 正则表达式替换引号之间的值

css - 悬停时更改文本颜色 - 碧 Jade

css - Mapbox GL JS - 样式按钮

angularjs - 如何使用 ui-router 1.0.x 测试转换钩子(Hook)

javascript - 显示一个数组中不存在于另一个数组中的对象