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在懸停時顯示不是跟蹤的完整名稱

回答

相關問題