我在试着画一张流量表。
- 条形图
- 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报告之前检查一下。
谢谢
2条答案
按热度按时间14ifxucb1#
经过一番调查:这只是github版本的flot上的一个有效错误。存档/托管版本没有此错误,例如
对于所有其他的,建议您使用0.8.3的标记版本,直到这个问题得到解决。
我发现了一个bug:https://github.com/flot/flot/issues/1856
TLDR:不使用
https://github.com/flot/flot
主分支vdzxcuhz2#
**固定宽度:**如果将barWidth设置为数值(例如,barWidth:0.6)时,它以x轴为单位指定每个条形的宽度。这意味着无论x轴数据范围或两个条形之间的数据点数量如何,它们都将具有固定的宽度。
**自动宽度:**如果您将barWidth设置为auto等特殊值,则Flot会根据数据点之间的间距和要显示的条数自动计算条的宽度。当您希望条形图均匀地填充可用空间时,此选项非常有用。
固定宽度和自动宽度之间的选择取决于您的特定图表和设计要求。对于固定宽度的条形图,您需要确定适合您的数据和可视化首选项的适当宽度。对于自动宽度,Flot将为您处理计算。
请记住,条形图的实际宽度还可能受到其他因素的影响,例如图容器的大小和图配置中设置的边距。因此,您可能还需要调整其他设置,以在图表中实现所需的条形图宽度。