Question

在向折线图添加标记时，有没有办法阻止Plotly更改x轴上的填充。请参阅下面的两个片段。唯一的区别是第24行'lines'更改为'lines+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>

带标记的第二个代码段：

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

Answer 1

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

这可以在css中完成，就像我一样，或者在Javascript中完成。

我可能没有这里的像素相同（设置为102px），但你应该明白这一点。

＆＃13;

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

＆＃13;

Answer 2

我遇到了同样的问题，我找到的解决方案是将autorange设置为false AND 指定x轴range。请参阅：https://plot.ly/javascript/reference/#layout-xaxis-range

修复示例：

＆＃13;

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

＆＃13;

Plotly.js添加标记将填充添加到x轴

2 个答案: