Question

我在角度应用程序中绘制了一个图表，但跟踪的名称很长。因此，当我将鼠标悬停在我的图表上时，通过将...放在后面来缩短名称。我真的不想要这个。我怎么能改变这个？

这是我的代码。

 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>

Answer 2

Plotly有一个新属性namelength，可用于此目的，请参阅Rajshekar Reddy的其他答案。

namelength（整数或大于或等于-1的整数数组）

设置跟踪名称的长度（以字符数表示）   悬停此跟踪的标签。

-1显示整个名称，无论长度如何。

0-3表示前0-3个字符，

整数＆gt; 3将显示整个名称，如果它少于那么多字符，但如果它更长，将截断为namelength - 3个字符并添加一个   省略号。

如果您想手动执行此操作，下面的解决方案仍然有效。

您也可以将跟踪name分配给text并将hoverinfo设置为x+y+text或自行修改hovertext对象（请参阅{{3更详细的解释）。

＆＃13;

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

＆＃13;

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

＆＃13;

悬停时，Plotly.js不显示跟踪的全名

2 个答案: