Question

在我使用Plotly.js渲染的图表中，我为每个轴定义标题。当鼠标悬停在图表中的项目时，会显示一个弹出窗口，但是＆＃34;标签＆＃34;显示不使用我定义的标题。

例如，x轴的默认值为x。我将hellox定义为标题，并且该值显示在图表中，但是当鼠标悬停值（x仍然显示）时则不会。

请在此处查看我的意思：https://codepen.io/anon/pen/qoGQvx

我一直在查看文档，到目前为止我找不到任何符合我想要的内容：只需更改弹出窗口中的标签即可。

Answer 1

这个问题还很老，我想写一个遇到相同问题时提出的解决方案。我确实为悬停信息定义了一个var文本数组，并在其中填充了x，y和z值的标签。请查看以下小提琴，在其中我使用热图图进行演示（这是我在项目中使用的图，但是可以轻松地将其用于您的图表选项）：http://jsfiddle.net/zLc5y63g/

这是html代码：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>

这是JavaScript：

var zValues = [[1, 20, 30], [20, 1, 60], [30, 60, 1]];
var yValues = ['data1', 'data2', 'data3'];
var xValues = ['condition1', 'condition2', 'condition3'];

var config = {
        displaylogo: false
      };

// fill in 'text' array for hover
var text = zValues.map (function(zValues, i) { return zValues.map (function (value, j) {
     return ` ID: ${yValues[i]}<br> Condition: ${xValues[j]}<br> Value: ${value.toFixed(2)} `
       });
     });

Plotly.newPlot('plotly_chart', [{x: xValues, y: yValues, z: zValues, text: text, hoverinfo: 'text', hoverlabel: {bgcolor: '#41454c'}, type: 'heatmap', colorscale: 'Viridis'}], config );

也许这仍然有用。

如何在Plotly.js中更改悬停信息的标签？

1 个答案: