Plotly.js 添加标记会在 x 轴上添加填充

Question

Plotly.js 添加标记会在 x 轴上添加填充

23

有没有办法防止Plotly在将标记添加到折线图时更改x轴的填充？请参见下面的两个片段。唯一的区别是第24行，其中'lines'被更改为'lines+markers'。

First snippet without markers:

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

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

Second snippet with markers:

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

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines+markers',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

- Wessi

1

你能具体点吗？在chrome上（Windows/Mac/Linux），x轴上的padding是一样的。我甚至把它们都保存为图片并叠加在一起，除了顶点处的点外，两者完全相同。你使用哪个浏览器/操作系统看到有区别？你能截屏吗？ - Fraser

我已经添加了一个屏幕截图，展示了差异。我使用的是 Chrome（Windows）浏览器。 - Wessi

1

我明白了，我认为我有一个不错的答案给你... - Fraser

3个回答

5

我遇到了同样的问题，我找到的解决方法是将 autorange 设置为 false 并且指定x轴的range。参考链接：https://plot.ly/javascript/reference/#layout-xaxis-range 修正后的示例：

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

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
        range: [0, 7]
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines+markers',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

- CYMA

1

请注意，当提供range时，autorange会自动设置为False。 - bkupfer

0

指定range是有效的，但我注意到当你使用模式栏按钮或鼠标双击自动缩放轴时，填充会自动重新添加（至少在Python中是这样）。所以我更喜欢使用autorangeoptions_maxallowed和autorangeoptions_minallowed，并设置我想要的范围的上下限。

- paulplusx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fraser · Accepted Answer

这有点令人困惑，因为实际上是y轴出了问题。无论如何，可以通过将yaxis设置为showgrid: false，然后偏移yaxislayer-above来重新定位标签来解决这个问题。

可以使用CSS或JavaScript来完成此操作，我已经使用CSS完成了。虽然我在这里可能没有完全像素对齐（设置为102px），但您应该能够理解。

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <style>
  .yaxislayer-above {
     transform: translate(102px,100px);
  }
  </style>
</head>

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      yaxis: {
        showgrid: false,
      },
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines+markers',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>