Plotly.js 中日期轴的最小缩放比例为一天

Question

有没有办法将 plotly 图表的最小缩放限制为一天？

在xaxis的tickformat中，我指定%d %b只显示日期和月份。如果放大太多，图表将在一天内显示多个刻度。我知道 plotly 尝试根据时间进一步缩放轴，但在我的情况下不需要这样做。

我曾尝试使用 tickvals 和 ticktexts，但由于 trace 的 x 数组的值可以从 0 到 365 天，所以最终出现了太多的重叠刻度。

var trace1 = {
  x: ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-15', '2000-01-16', '2000-01-17', '2000-01-18', '2000-01-19', '2000-01-20', '2000-01-21', '2000-01-22', '2000-01-23', '2000-01-24', '2000-01-25', '2000-01-26', '2000-01-27', '2000-01-28', '2000-01-29', '2000-01-30', '2000-01-31'],
  y: [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5, -16.9, -12, -6.1, -6.6, -7.9, -10.8, -14.8, -11, -4.4, -1.3, -1.1],
  mode: 'lines',
  type: 'scatter',
  name: '2000'
};

var data = [ trace1 ];

var layout = {
  xaxis: {
    type: 'date',
    title: 'January Weather',
  tickformat: '%d %b'
  },
  yaxis: {
    title: 'Daily Mean Temperature'
  },
  title:'2000 Toronto January Weather'
};

Plotly.plot('myDiv', data, layout);

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

<div id="myDiv" style="width:100%;height:400px;"></div>

我想在可能的最大缩放下单勾选一天。有没有办法限制缩放或每天最多显示一个刻度？

谢谢！

Answer 1

看起来最好的方法是使用 type: 'category' 而不是 type: 'date'

Plotly.js 中日期轴的最小缩放比例为一天

Minimum zoom scale of one day for date axis in Plotly.js

javascript

plotly