angular - 当鼠标悬停在 Plotly.js 上时，Plotly.js 显示的不是跟踪的全名

Question

我在 Angular 应用程序中用plotly制作了一个图表，但跟踪的名称很长。 因此，当我将鼠标悬停在图表上时，名称会通过在其后面添加 ... 来缩短。我真的不想要这个。我该如何改变这个？

这是我的代码。

 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);

Answer 1

我只需在跟踪对象中添加以下行即可显示长名称。

hoverlabel: {namelength :-1}

这是一个工作示例。

Plotly.plot('graph', [{
  y: [2,1,2],
  name: 'loooooooooooooooooooooooooong text name',
  hoverinfo: "y+name",
  hoverlabel: {namelength :-1},
}])

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph"></div>