javascript - 是否可以更改 Plotly Js 气泡图悬停工具提示中的文本？

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对悬停文本进行某种基本控制级别的设置:

Any combination of "x", "y", "z", "text", "name" joined with a "+" OR "all" or "none" or "skip".

examples: "x", "y", "x+y", "x+y+z", "all"

default: "all"

Determines which trace information appear on hover. If none or skip are set, no information is displayed upon hovering. But, if none is set, click and hover events are still fired.

但是，对于更复杂的示例，您需要使用数据的 text 部分。可以将其设置为自定义值，然后设置 hoverinfo: "text"。

例如，请参阅此 heatmap Codepen