禁用Plotly.js中的悬停效果

Question

禁用Plotly.js中的悬停效果

6

尝试在Plotly中创建风向玫瑰图；实际图表显示良好，但我不想要任何悬停工具提示。 hoverinfo:none 似乎无效；我做错了什么吗？

var json = 
{"RequestID":null,"AppCode":"0","AppMessage":"OK","Meta":null,"Data":{"Series":[{"r":[23.658536585365852,19.878048780487806,7.8048780487804876,5.8536585365853666,13.292682926829269,6.463414634146341,4.024390243902439,19.024390243902438],"t":["0","45","90","135","180","225","270","315"],"name":"\u003e 25","marker":{"color":"#FF0000"},"type":"area","hoverinfo":"none"},{"r":[23.658536585365852,19.878048780487806,7.8048780487804876,5.8536585365853666,13.292682926829269,6.463414634146341,4.024390243902439,19.024390243902438],"t":["0","45","90","135","180","225","270","315"],"name":"10 - 25","marker":{"color":"#ED850C"},"type":"area","hoverinfo":"none"},{"r":[21.707317073170728,18.414634146341463,7.0731707317073171,5.7317073170731714,12.804878048780488,5.975609756097561,3.7804878048780486,17.926829268292682],"t":["0","45","90","135","180","225","270","315"],"name":"5 - 10","marker":{"color":"#3F3F3F"},"type":"area","hoverinfo":"none"},{"r":[19.756097560975608,17.4390243902439,6.4634146341463419,5.1219512195121961,11.585365853658537,5.1219512195121952,3.4146341463414633,15.487804878048781],"t":["0","45","90","135","180","225","270","315"],"name":"2 - 5","marker":{"color":"#2A4354"},"type":"area","hoverinfo":"none"},{"r":[17.073170731707314,13.780487804878048,5.3658536585365857,4.6341463414634152,10,3.9024390243902443,3.0487804878048781,12.073170731707318],"t":["0","45","90","135","180","225","270","315"],"name":"1 - 2","marker":{"color":"#5486A9"},"type":"area","hoverinfo":"none"},{"r":[11.829268292682926,9.2682926829268286,3.2926829268292686,2.8048780487804881,7.4390243902439019,3.1707317073170733,2.1951219512195119,8.536585365853659],"t":["0","45","90","135","180","225","270","315"],"name":"\u003c 1","marker":{"color":"#68A7D3"},"type":"area","hoverinfo":"none"}]}};

var data = json.Data.Series;

var layout = {
  title: 'Wind Speed Distribution in Laurel, NE',
  font: {size: 11},
  legend: {font: {size: 16}},
  radialaxis: {ticksuffix: '%'},
  orientation: 270,
  hovermode: 'none',
  yaxis: {
  }
};

Plotly.newPlot('myDiv', data, layout);

工作示例：https://jsfiddle.net/whelkaholism/yyfoyd9h/4/

- Whelkaholism

您提供的代码似乎与您在jsfiddle中提供的完全相同，并且没有显示悬停工具提示。所以我不知道您在这里遇到了什么问题？ - IIIIIIIIIIIIIIIIIIIIII

嗯，它对我展示了它们。一个带有r和t值的彩色标注和一个显示百分比值的小白色工具提示。我现在已经通过CSS样式化SVG类解决了这个问题，所以我一会儿会添加我的答案。 - Whelkaholism

也请发给我看。尝试在 plotly 论坛发帖询问。他们会非常迅速地解答。 - abalter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- laaposto · Accepted Answer

您需要添加hovermode: !1来禁用悬停效果。

尝试：

var layout = {
  title: 'Wind Speed Distribution in Laurel, NE',
  font: {size: 11},
  legend: {font: {size: 16}},
  radialaxis: {ticksuffix: '%'},
  orientation: 270,
  hovermode: false,
  yaxis: {
  }
};

< p > hovermode 的可接受值为 "x", "y", "closest", false。