如何在Plotly的日期型X轴中使用x0/dx参数？

问题背景 #

你用Plotly.js做投票意向图，需要绘制散点+按日递增的趋势线。散点数量少可以直接写全X/Y对，但趋势线要每天一个点，想靠x0（起始日期）+dx（1天间隔）省掉写全日期数组的麻烦，结果日期型X轴下dx完全没用，趋势线全堆在第一个日期上。

为啥不行？ #

Plotly的x0/dx机制是给数值型轴设计的，日期字符串没法直接做增量计算，所以所有Y值都绑定到x0对应的那一个日期上，自然堆成一团。

解决办法 #

把起始日期转成毫秒时间戳当x0，dx设成一天对应的毫秒数（86400000，即246060*1000），再确保X轴类型配置为date，Plotly会自动把时间戳解析成正常日期显示。

修复后的代码示例 #

const config = {displayModeBar: false};

// 修复后的图表：用时间戳实现日期轴的x0/dx趋势线
{
  var polls = {
    type: 'scatter',
    mode: 'markers',
    x: ['2024-12-05', '2024-12-07' ],
    y: [2, 5],
    marker: {color: 'green'}
  };
  // 将起始日期转为毫秒时间戳
  const startTimestamp = new Date('2024-12-05').getTime();
  var trend = {
    type: 'scatter',
    mode: 'lines',
    line: {color: 'red'},
    x0: startTimestamp,
    dx: 86400000, // 1天对应的毫秒数
    y: [1, 4, 2, 3],
  };
  var layout = {
    xaxis: {
      title: 'Date',
      type: 'date' // 显式指定日期轴类型，确保时间戳被正确解析
    }
  };
  Plotly.newPlot('fixed', [polls, trend], layout, config);
}

<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
<p>Fixed: x0/dx with date axis using timestamps</p>
<div id="fixed" style="width:600px;height:250px;"></div>

关键点说明 #

• 时间戳转换：通过new Date('日期字符串').getTime()把日期转成Plotly能识别的数值型日期格式
• dx取值：用一天对应的毫秒数作为增量，就能实现趋势线每日递增的效果
• 轴类型配置：显式设置xaxis.type='date'，保证Plotly把时间戳渲染为人类可读的日期，而非原始数字

内容的提问来源于stack exchange，提问作者Jon Skeet