时间戳

首页 > 解决方案 > 图表底部的多个 x 轴

javascript - 图表底部的多个 x 轴

问题描述

我试图在图表底部显示多个 x 轴。我开始使用 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 示例在这里

标签： javascriptplotly

解决方案

我检查了你的代码笔，问题只是position不能设置为一个negative值，因此你可以向上移动轴，但现在向下移动。我有两个解决方案，它涉及使用 定位轴ticklength，作为一种 hack，请参考下面的示例，实施它，如果您的问题得到解决，请告诉我！

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

推荐阅读