我需要在一个宽度非常有限的页面上实现一个plotly.js图表。结果,工具提示被部分剪切了。是否可以使工具提示不受plotly.js容器大小的限制?
我在codepen的代码示例:https://codepen.io/anatoly314/pen/gOavXzZ?editors=1111
//my single trace defined as following but it's better to see example at codepen
const yValue1 = [1000];
const trace1 = {
x: [1],
y: yValue1,
name: `Model 1`,
text: yValue1.map(value => Math.abs(value)),
type: 'bar',
textposition: 'outside'
};
3条答案
按热度按时间kyvafyod1#
根据设计,图表的任何部分都不可能溢出其容器。
5ktev3wc2#
我会说,这是错误的说,通过设计这是不可能的!这是一个有点hacky,但当你添加以下行,它显示的标签以外的svg:
zpf6vheq3#
rokdd给出的答案是可行的,但是css选择器应该更具体,否则很自然会引入一些细微的bug(特别是当你需要滚动包含plotly图表的内容时)。
如果我们看一下Plotly构建的DOM树,我们会发现工具提示是在
<g class="hoverlayer"></g>
元素(它是三个<svg class="main-svg"></svg>
中的一个的直接子元素)中创建的,所以父元素(svg.main-svg
元素)是唯一需要受影响的元素。在这种情况下,理想的css选择器应该是
:has
选择器,但它仍然不受支持(截至2022年):https://css-tricks.com/the-css-has-selector/接下来最简单的就是在调用
Plotly.newPlot
之后使用一点javascript:或者以更通用的方式(适用于任何图表):