Как изменить только заголовок всплывающего окна в Plotly.js?

Question

Как изменить только заголовок всплывающего окна в Plotly.js?

В диаграмме, которую я отображаю с помощью Plotly.js, я определяю заголовки для каждой оси. При наведении курсора мыши на элементы в диаграмме отображается всплывающее окно, но показанные "метки" не используют названия, которые я определил.

Например, значение по умолчанию для оси х x, Я определил hellox как заголовок, и это значение отображается на графике, но не при наведении курсором мыши на значение (x все еще показано).

Смотрите живой пример того, что я имею в виду: https://codepen.io/anon/pen/qoGQvx

Я искал документацию и не нашел ничего такого, что делало именно то, что я хотел: просто менял ярлыки во всплывающем окне.

2

plotly.js

Источник

user3361339 13 апр '18 в 15:33

0 ответов

Другие вопросы по тегам plotly.js

user8008652 25 мар '19 в 01:21 2019-03-25 01:21 · Answer 1 · 2019-03-25 01:21

Также вопрос довольно старый, я хотел бы написать решение, которое я нашел, когда столкнулся с той же проблемой. Я определил текстовый массив 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 );

Может быть, это все еще полезно.