JavaScript，Plotly：如何在条形图上自定义轴标签？

Question

我正在绘制一个带有x轴日期值的条形图。只需设置料箱和料柱高度的值即可得到所需的图，但轴标签（日期值）位于棒的中心下方（参见屏幕截图）。

但是每个条形代表日期范围， 我希望标签位于条形边缘下方。我该怎么做 ？

Answer 1

您可以将绘图转换为散点图并将其填充到x轴。出现在x轴上的标签可以通过layout: xaxis: tickvals指定。

如果您想要同样大小的条形，请将layout: xaxis: type设置为category。

var data = {
  x: ['2013-11-02', '2013-11-04', '2013-11-05', '2013-11-07', '2013-11-09', '2013-11-11', '2013-11-13'],
  y: [1, 3, 6, 4, 5, 2, 6],
};
var trace = {
  x: [],
  y: [],
  type: 'scatter',
  mode: 'lines',
  fill: 'tozeroy'
};

for (var i = 0; i < data.x.length - 1; i += 1) {
  trace.x.push(data.x[i]);
  trace.y.push(0);
  trace.x.push(data.x[i]);
  trace.y.push(data.y[i]);
  trace.x.push(data.x[i + 1]);
  trace.y.push(data.y[i]);
}
trace.x.push(data.x[data.x.length - 1]);
trace.y.push(0);

var layout = {
  xaxis: {
    type: 'category',
    tickvals: data.x,
    tickangle: -45
  }
}
Plotly.newPlot('myDiv', [trace], layout);

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