有没有办法在不重叠的情况下在 plotly graph 工具提示中显示文本？

Question

如下面的代码笔所示，轨迹 1 的文本值正在被修剪，因为它靠近图表边框。需要显示这些数字高于一切。已尝试设置 z-index。没用。

https://codepen.io/satishvarada/pen/yLVoqqo

var trace1 = {
  x: [1, 2, 3, 4],
  y: [16, 16, 16, 16],
  type: 'scatter',
  text:[16, 16, 16, 16],
  textposition:'top',
  mode:'lines+markers+text'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter',
  mode:'lines+markers+text'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Answer 1

我不是 plotly 用户，但这是我的尝试：

问题：

Plotly 的默认值 height 为 450px，并且它还使用一些关于其 layout 设置的默认值，这些值可以在文档 here 中找到。由于您正在尝试绘制高度较小的内容 (350px)，因此您可以稍微调整默认的 layout 值以使文本更适合。下面，我刚刚设置了较小的 margin 值，例如 40 而不是 80、80、80、100，这是默认值它似乎有效。

解决方案：

var layout = {
  autosize: true,
  height: 350,
  margin: {
      l: 40,
      r: 40,
      b: 40,
      t: 40,
      pad: 0
    },
};
var config = {responsive: true}
Plotly.newPlot('myDiv', data, layout, config);

（请注意，我在布局对象中设置了 height，并且已将其从 div 的 style 属性中删除）

工作示例：

var trace1 = {
  x: [1, 2, 3, 4],
  y: [16, 16, 16, 16],
  type: 'scatter',
  text:[16, 16, 16, 16],
  textposition:'top',
  mode:'lines+markers+text'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter',
  mode:'lines+markers+text'
};

var data = [trace1, trace2];
// var data = [trace1];
var layout = {
  autosize: true,
  height: 350,
  margin: {
      l: 40,
      r: 40,
      b: 40,
      t: 40,
      pad: 0
    },
};
var config = {responsive: true}


Plotly.newPlot('myDiv', data, layout, config);

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Answer 2

试试这个。

.plot { clip-path: none; }

有没有办法在不重叠的情况下在 plotly graph 工具提示中显示文本？

Is there a way to show text in plotly graph tooltip without being overlapped?

javascript

css

plotly.js

问题：

解决方案：

工作示例：