Несколько осей х в нижней части диаграммы

Question

Я пытаюсь показать несколько осей х в нижней части моего графика.Я начал добавлять ось с layout.xaxis.position, чтобы показать их в стопке, но они начинают преодолевать диаграмму.Затем я установил layout.margin.pad на 50 и получил желаемый результат только для первой оси.

Есть ли способ сделать это для оставшихся?Или это ошибка?

var layout = {
  xaxis: {
    fixedrange: true,
    autoexpand: false
  },
  xaxis2: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.1
  },
  xaxis3: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.2
  },
  yaxis: {
    fixedrange: true,
    zeroline: false,
    rangemode: 'tozero'
  },
  showlegend: false,
  autosize: false,
  width: 450,
  height: 220,
  margin: {
    l: 10,
    r: 10,
    b: 60,
    t: 10,
    pad: 40
  }
};

Изображение диаграммы с безумными навыками рисования.

Пример Codepen здесь

Answer 1

Я проверил вашу кодовую ручку, проблема в том, что position нельзя установить на значение negative, поэтому вы можете перемещать оси вверх, но теперь вниз.У меня есть два решения для вас, оно включает в себя позиционирование осей с помощью ticklength, в качестве своего рода хака, пожалуйста, обратитесь к приведенному ниже примеру, реализуйте его и дайте мне знать, если ваша проблема решена!

var data = JSON.parse('[{"name":"Atual","x":["May 28","May 29","May 30","May 31","Jun 01","Jun 02","Jun 03"],"y":[115.4,122.4,102.3,105.1,28.9,29.6,114.2]},{"name":"Atual-1","xaxis":"x2","x":["Jun 04","Jun 05","Jun 06","Jun 07","Jun 08","Jun 09","Jun 10"],"y":[69.6,71.1,78.9,72.5,24.5,25.2,69.2]},{"name":"Atual-2","xaxis":"x3","x":["Jun 11","Jun 12"],"y":[0.08,0]},{"name":"Atual 77777","xaxis":"x3","x":["Jun 11","Jun 12"],"y":[109.9,2.9]},{"name":"Atual-3","xaxis":"x4","x":["Jun 11","Jun 12"],"y":[8.6,0.2]},{"name":"Atual 2","xaxis":"x4","x":["Jun 11","Jun 12"],"y":[0.06,0]}]');

var layout = {
  xaxis: {
    fixedrange: true,
    autoexpand: false,
    visible: false
  },
  xaxis2: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.1,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    gridcolor: "#000000"
  },
  xaxis3: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.2,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    gridcolor: "#000000"
  },
  xaxis4: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    gridcolor: "#000000"
  },
  yaxis: {
    fixedrange: true,
    zeroline: false,
    rangemode: 'tozero'
  },
  showlegend: false,
  autosize: false,
  width: 450,
  height: 220,
  margin: {
    l: 30,
    r: 0,
    b: 70,
    t: 0,
    pad: 0
  }
};

var layout2 = {
  xaxis: {
    fixedrange: true,
    autoexpand: false,
    visible: false
  },
  xaxis2: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.1,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    tickcolor: "#eee"
  },
  xaxis3: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.2,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    tickcolor: "#eee"
  },
  xaxis4: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    tickcolor: "#eee"
  },
  yaxis: {
    fixedrange: true,
    zeroline: false,
    rangemode: 'tozero'
  },
  showlegend: false,
  autosize: false,
  width: 450,
  height: 220,
  margin: {
    l: 30,
    r: 0,
    b: 70,
    t: 0,
    pad: 0
  }
};

Plotly.newPlot('myDiv', data, layout, {displayModeBar: false, showTips: false, staticPlot: false});

Plotly.newPlot('myDiv2', data, layout2, {displayModeBar: false, showTips: false, staticPlot: false});

<script src="https://cdn.plot.ly/plotly-latest.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">
<div id="myDiv2" style="width: 480px; height: 400px;">