Plotly.js Добавление маркеров добавляет дополнение к оси x

Есть ли способ предотвратить 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>

ОТВЕТЫ

Ответ 1

Это немного запутанно, поскольку на самом деле это ось y, которая выключена. В любом случае это можно решить, установив yaxis в showgrid: false, а затем компенсируя yaxislayer-above, чтобы переместить метки.

Это можно сделать в css, как и у меня, или в Javascript.

Возможно, у меня не будет пикселя, идентичного здесь (установлен на 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>