Jquery Flot条形图:在有';只有一个条目吗?
有人知道如何在只有一个条目的flot条形图中定义x轴的长度吗 有“最小”和“最大”选项,但它们似乎需要绝对值 默认情况下,x轴会自动拉伸以适合条目的值。从文档中:Jquery Flot条形图:在有';只有一个条目吗?,jquery,flot,Jquery,Flot,有人知道如何在只有一个条目的flot条形图中定义x轴的长度吗 有“最小”和“最大”选项,但它们似乎需要绝对值 默认情况下,x轴会自动拉伸以适合条目的值。从文档中: The options "min"/"max" are the precise minimum/maximum value on the scale. If you don't specify either of them, a value will automatically be chosen based on the minim
The options "min"/"max" are the precise minimum/maximum value on the
scale. If you don't specify either of them, a value will automatically
be chosen based on the minimum/maximum data values.
在只有一个条目的图形上,条会延伸到x轴的全部范围,这看起来显然是错误的
看 您可以使用AJAX调用或jQuery设置最小值和最大值。将最小值和最大值设置为少一个月和/或多一个月,以避免条形图填满整个图表区域。我恐怕对flot不是很熟悉,但请咨询,似乎可以配置条形图的宽度和对齐方式。大概也可以配置图表的总宽度。例如,如果图表的宽度为500px,请按如下方式设置
条形图
:
bars: {
barWidth: 250,
align: "center",
horizontal: false
}
应将单杆置于X轴的中间。
< P> OK,改变粘性。由于你正在处理全天的数据(显然)而不是一个连续的“模拟”系列,我建议你把这个明确的例子这是我的解决方案,对我有效
var保证金=0.01//违约
//如果数组只有一个值,请更改边距的大小
//然后,您可以有一个小列
如果(data.length==1)
{
保证金=3.00;
}
//显示图形
$.plot($(“#barras”),[数据]{
xaxis:{
自动缩放边距:边距//设置新值
}
});
你说的是y轴还是x轴?y轴大于给定示例中的最大值。ie 250 vs 216x轴-对不起。。。。有编辑问题!我不完全确定,但这是回答还是评论?部分是两者兼而有之。可以使用AJAX调用设置最小值和最大值。然而,AP257似乎没有通过AJAX设置数据,这将使他通过jQuery设置Min/Max。按要求编辑了我的答案。如果你这样做,看起来还是很糟糕,但我想知道如果你有一个1200像素宽的图形,只有一个数据点,那么理想的行为是什么…@Ryley:是的,我理解你的问题。如果是这种情况,您可以使用jQuery设置Flot div的宽度。抱歉,不起作用-它仍然会拉伸条以填充整个图形:(没有,但我在OPs页面上测试了它,因为我想看看它是否能工作……我用flot做了一些开发,这可能会给我带来…@Ryley Cool,AP257不在这里让我感到羞耻。也许他们已经用过了。不能这样推poeple!别担心,@AP257最终会注意到,人们不喜欢留下未被接受的问题……@MichelAyres)您好-JSFIDLE依赖于OPs基础URL,但它不再是。。。。
var options = {
xaxis: {
mode: "time",
timeformat: "%y-%b",
minTickSize: [1, "day"], //we are only working to a resolution of 1 day
autoscaleMargin: 0.02 //autoscaleMargin solves the issue of bars extending the full width
},
yaxis: {
tickFormatter: suffixFormatter
},
legend: {
position: "nw",
},
colors: ["#830242"],
grid: { hoverable: true, clickable: true }
};
var data = [
{
points: {
show: true
},
lines: {
show: false,
fill: 0
},
bars: {
show: true,
barWidth: 24 * 60 * 60 * 1000 //Force the bar to a day-wide (in milliseconds)
},
data: [
[ new Date('2010-04-08T00:00:00Z'), 216359.0 ]
]}
];