如何在Plotly.js柱状图中设置分组柱宽度并配置x轴小时级时间间隔

解决方案 #

你遇到的问题是由于Plotly.js在时间范围跨度大但有效数据仅集中在单个小时时，会自动将x轴时间精度下探到毫秒级，导致分组柱状图的柱子宽度被压缩。可通过以下配置修改解决：

1. 强制x轴按小时间隔渲染
   在layout.xaxis中新增3个配置项，明确x轴为日期类型、强制刻度间隔为1小时、并指定 tick 格式为小时级展示：

xaxis: {
  title: 'Graph Title',
  range: [new Date(instance['start_date']), new Date(instance['end_date'])],
  // 新增以下配置
  type: 'date',
  dtick: 3600000, // 1小时对应的毫秒数，强制刻度间隔为1小时
  tickformat: '%Y-%m-%d %H:00' // 可根据需要调整时间展示格式
}

2. 调整柱子宽度适配小数据量场景
   如果需要在保留原有x轴范围的前提下让柱子更宽，可通过两种方式配置：

• 全局调整柱状图间隙：在layout中新增bargap和bargroupgap配置，降低柱子之间的间隙占比：

var layout = {
  barmode: 'group',
  bargap: 0.1, // 不同组柱子之间的间隙，默认0.2
  bargroupgap: 0.05, // 同组内柱子之间的间隙，默认0.1
  // 其他原有配置...
}

• 直接指定柱子宽度：在每个trace的配置中添加width属性，单位为毫秒，比如设置为半小时宽度（1800000毫秒）：

var trace1 = {
  x: [],
  y: [],
  name: 'data 1',
  type: 'bar',
  width: 1800000 // 柱子宽度对应时间跨度为半小时
};
// trace2、trace3 同样添加width属性即可

内容的提问来源于stack exchange，提问作者Arash R