Plotly.js在悬停时显示不是跟踪的完整名称

我用角度应用绘制了一个图形，但跟踪名称很长。所以当我将鼠标悬停在我的图表上时，通过将...放在后面缩短名称。我真的不想要这个。我该如何改变这一点？Plotly.js在悬停时显示不是跟踪的完整名称

这是我的代码。

var text = "Plot_ForecastConfig"; 
    var layout = { 
     showlegend: true, 
     legend: {"orientation": "h"}, 
     yaxis: { 
     title: 'Sales', 
     titlefont: { 
      family: 'Courier New, monospace', 
      size: 18, 
      color: '#7f7f7f' 
     } 
     } 
    }; 
    var options = { 
     scrollZoom: true, 
     showLink: false, 
     modeBarButtonsToAdd: [{ 
     name: 'image', 
     title: 'Download plot as a png', 
     icon: Plotly.Icons.camera, 
     click: function() { 
      Plotly.downloadImage(document.getElementById('graph'), { 
      filename: text, 
      format: 'png', 
      height: 700, 
      width: 1000 
      }); 
     } 
     }], 
     modeBarButtonsToRemove: ['toImage', 'zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'], 
     displaylogo: false, 
     displayModeBar: true, 
    }; 

    Plotly.newPlot('graph', this.drawing, layout, options);

来源

2017-07-26 fangio

您既可以指定跟踪name到text以及和设置hoverinfo到x+y+text或自己修改hovertext对象（见here了更详细的解释）。

var _this = { 
 
    drawing: [{ 
 
    x: [1, 2, 3], 
 
    y: [1, 2, 5], 
 
    text: "Yeah, that's a really long name, let's see what Plotly does to it", 
 
    name: "Yeah, that's a really long name, let's see what Plotly does to it", 
 
    hoverinfo: "x+y+name" 
 
    }] 
 
}; 
 

 
var myPlot = document.getElementById('graph1'); 
 
Plotly.newPlot(myPlot, _this.drawing); 
 
_this.drawing[0].hoverinfo = 'x+y+text'; 
 
Plotly.newPlot('graph2', _this.drawing); 
 

 

 
myPlot.on('plotly_hover', function(data) { 
 
    var infotext = data.points.map(function(d) { 
 

 
    if (d.x > 1) { 
 
     return d.data.name; 
 
    } else { 
 
     return ""; 
 
    } 
 
    }); 
 

 
    if (infotext[0] === "") { 
 
    return; 
 
    } 
 
    var hoverinfo = Plotly.d3.selectAll('.hovertext').selectAll('.name'); 
 
    var cloned = Plotly.d3.selectAll('.hovertext').append(hoverinfo.property("nodeName")); 
 
    var attr = hoverinfo.node().attributes; 
 
    for (var j = 0; j < attr.length; j += 1) { 
 
    cloned.attr(attr[j].name, attr[j].value); 
 
    } 
 
    cloned[0][0].innerHTML = infotext[0]; 
 
    hoverinfo.attr('opacity', 0); 
 
    cloned.attr('opacity', 1); 
 
});

<script src='https://cdn.plot.ly/plotly-latest.min.js'></script> 
 
<div id='graph1'></div> 
 
<div id='graph2'></div>

来源

2017-07-26 20:15:29

Plotly.js在悬停时显示不是跟踪的完整名称

回答

相关问题