jquery flot bar宽度显示不相等

l7wslrjt  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(99)

我在试着画一张流量表。

  • 条形图
  • 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,,这是我犯的错误吗?我怎么才能让它的大小相等呢?
这可能是一个bug,但我想在提交bug报告之前检查一下。
谢谢

14ifxucb

14ifxucb1#

经过一番调查:这只是github版本的flot上的一个有效错误。存档/托管版本没有此错误,例如

<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>

对于所有其他的,建议您使用0.8.3的标记版本,直到这个问题得到解决。
我发现了一个bug:https://github.com/flot/flot/issues/1856
TLDR:不使用https://github.com/flot/flot主分支

vdzxcuhz

vdzxcuhz2#

**固定宽度:**如果将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>

相关问题