是否可以在懸浮工具提示中更改Plotlyjs氣泡圖中的文字？

Question

我的網站上有一張Plotlyjs氣泡圖。 懸停時，工具提示會顯示x，y和文本。 我想在工具提示中使用自定義文本，此功能是否可用？

示例： http ： //codepen.io/sushilaitian/pen/NbGZzq

var myPlot = document.getElementById('my-graph');
        Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){
        var YEAR = 2007;
        var continents = ['Asia', 'Europe', 'Africa', 'Oceania', 'Americas'];
        var POP_TO_PX_SIZE = 2e5;
        function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
        }

        var data = continents.map(function(continent) {
          var rowsFiltered = rows.filter(function(row) {
              return (row.continent === continent) && (+row.year === YEAR);
          });
          return {
              mode: 'markers',
              name: continent,
              x: unpack(rowsFiltered, 'lifeExp'),
              y: unpack(rowsFiltered, 'gdpPercap'),
              text: unpack(rowsFiltered, 'country'),
              marker: {
                  sizemode: 'area',
                  size: unpack(rowsFiltered, 'pop'),
                  sizeref: POP_TO_PX_SIZE
              }
          };
        });
        var layout = {
          xaxis: {title: 'Life Expectancy'},
          yaxis: {title: 'GDP per Capita', type: 'log'},
          margin: {t: 20},
          hovermode: 'closest'
        };
        Plotly.plot('my-graph', data, layout, {showLink: false});
        });

        setTimeout(function(){
            myPlot.on('plotly_click', function(data){
                var pts = '';
                for(var i=0; i < data.points.length; i++){
                    pts = 'x = '+data.points[i].x +'\ny = '+
                        data.points[i].y.toPrecision(4) + '\n\n';
                }
                alert('Closest point clicked:\n\n'+pts);
            });         
        }, 5000);

Answer 1

Plotly具有hoverinfo設置，可以對懸停文本進行一些基本控制：

"x" ， "y" ， "z" ， "text" ， "name"與"+"或"all"或"none"或"skip"任意組合。

示例： "x" ， "y" ， "x+y" ， "x+y+z" ， "all"

默認： "all"

確定懸停時顯示的跟蹤信息。 如果none或skip設置，沒有信息，通過懸停顯示。 但是，如果none設置，則單擊並懸停事件仍會被觸發。

但是，對於更復雜的示例，您需要使用數據的text部分。 這可以設置為自定義值，然后設置hoverinfo: "text" 。

例如，請參閱此熱圖Codepen