浮动条宽度显示不均匀

Question

我正在尝试绘制流程图。

• 条形图
• x 轴上的时间
• 所有条形的 x 尺寸（宽度）应相同

这是使用的代码：

var data = [{
    color: '#ff7e00',
    data: [
        [1692473400, 19.95],
        [1692480600, 19.194],
        [1692484200, 18.606],
    ]
}, {
    color: '#ff0000',
    data: [
        [1692468000, 32.76],
        [1692469800, 33.894],
        [1692471600, 20.139],
        [1692475200, 21],
        [1692477000, 21],
        [1692478800, 21.231],
        [1692482400, 20.16],
    ]
}];

$.plot("#pricesToday", data, {
    series: {
        bars: {
            show: true,
            barWidth: 0.6,
            align: "left"
        }
    },
    xaxis: {
        mode: "time",
        timeformat: "%H:%M",
        timezone: "none"
    }
});

这给出了以下渲染：

正如您所看到的，尽管看到了

barWidth: 0.6,

，但它的大小并不相同 这是我犯的错误吗？如何强制它大小相等？

这可能是一个错误，但我想在提出错误报告之前检查一下。

谢谢

Answer 1

固定宽度：如果将 barWidth 设置为数值（例如 barWidth: 0.6），则它以 x 轴单位指定每个条形的宽度。这意味着无论 x 轴数据范围或两个条形之间的数据点数量如何，它们都将具有固定的宽度。

自动宽度：如果将barWidth设置为auto等特殊值，Flot将根据数据点之间的间距和要显示的条形数量自动计算条形的宽度。当您希望条形均匀地填充可用空间时，这会很有用。

固定宽度和自动宽度之间的选择取决于您的具体图表和设计要求。对于固定宽度的条形图，您需要确定适合您的数据和可视化首选项的合适宽度。对于自动宽度，Flot 将为您处理计算。

请记住，条形的实际宽度也可能受到其他因素的影响，例如绘图容器的大小和绘图配置中设置的边距。因此，您可能还需要调整其他设置才能在图表中实现所需的条形宽度。

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: 1000000,
                align: "center"
            }
        },
        xaxis: {
            mode: "time",
            timeformat: "%H:%M",
            timezone: "browser"
        }
    });

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script> 
    
<div id="pricesToday" style="width: 800px; height: 400px;"></div>