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"。

例如，请参阅此heatmap Codepen

是否可以在悬浮工具提示中更改Plotlyjs气泡图中的文字？

1 个答案: