增加 plotly 饼图 hoverlabel 中的填充 - javascript

Question

我正在尝试使用以下方法增加饼图的 hoverlabel 属性的填充，但似乎不起作用。有没有人尝试过这个用例或者有任何其他方法可以做到这一点..

 hoverlabel: {
                        bgcolor: 'white',
                        bordercolor: '#e7e7e7',
                        font: {
                            color: 'black',
                        },
                        padding: {
                            t: '20',
                            b: '50',
                            l: '0',
                            r: '0'
                        },
                        borderwidth: 2
}

Answer 1

Plotly Pie Chart 不支持 hoverlabel 中的填充属性
参考 - https://plotly.com/javascript/reference/#pie-hoverlabel

但是您可以使用 hovertemplate 属性自定义悬停标签 https://plotly.com/javascript/hover-text-and-formatting/

Answer 2

您可以使用CSS展开图例框，然后移动悬停元素。

.legend .bg {
  rx: 10px;
  transform: scale(1.2, 1.2);
}

.legend .scrollbox {
  transform: translate(10px, 7px);
}

不是一个完美的解决方案，但它有效。

增加 plotly 饼图 hoverlabel 中的填充 - javascript

Increasing padding in plotly pie chart hoverlabel - javascript

javascript

css

plotly

plotly.js