Flot柱状图宽度显示不均问题排查与解决请求

在Flot的时间轴模式下，barWidth的单位是毫秒，并非相对比例值。你设置的0.6对时间轴来说几乎等同于0，Flot会自动根据相邻数据点的时间间隔调整柱子宽度，这就是不同柱子宽度不一致的核心原因。

要强制所有柱子宽度相等，需将barWidth设为合适的毫秒值——通常取小于数据中最小时间间隔的数值，避免柱子重叠。

你的数据中所有时间点的间隔为1800秒（即1800000毫秒），可以把barWidth设为1500000（或根据视觉需求调整，只要小于最小间隔即可）。同时注意：Flot时间轴默认需要毫秒级时间戳，你的原始时间戳是秒级的，要在末尾补三个0。

修改后的代码：

var data = [{
    color: '#ff7e00',
    data: [
        [1692473400000, 19.95],
        [1692480600000, 19.194],
        [1692484200000, 18.606],
    ]
}, {
    color: '#ff0000',
    data: [
        [1692468000000, 32.76],
        [1692469800000, 33.894],
        [1692471600000, 20.139],
        [1692475200000, 21],
        [1692477000000, 21],
        [1692478800000, 21.231],
        [1692482400000, 20.16],
    ]
}];

$.plot("#pricesToday", data, {
    series: {
        bars: {
            show: true,
            barWidth: 1500000,  // 设为1500秒，小于最小间隔1800秒
            align: "center"     // 可选：居中对齐视觉更协调
        }
    },
    xaxis: {
        mode: "time",
        timeformat: "%H:%M",
        timezone: "none"
    }
});

如果后续数据的时间间隔可能变化，可以通过代码自动计算最小间隔并设置barWidth：

// 收集所有数据点的时间间隔
let allIntervals = [];
data.forEach(series => {
    for (let i = 1; i < series.data.length; i++) {
        allIntervals.push(series.data[i][0] - series.data[i-1][0]);
    }
});
// 取最小间隔的80%作为barWidth，避免柱子重叠
const minInterval = Math.min(...allIntervals);
const barWidth = minInterval * 0.8;

这不是操作失误，只是对时间轴模式下barWidth的单位规则理解有误，按上述方法修改后就能实现所有柱子宽度一致的效果。

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