我有一个flotr2图表,它应该在其中显示一些数据:
修改: Chrome用户:请注意,这个jsfiddle似乎不适合我使用chrome,不知道为什么
http://jsfiddle.net/1jgb2k6r/7/
我的问题是我的酒吧在他们所代表的日期不是中心对齐的。
$(function () {
(function color_gradients(container) {
var myData = [];
myData.push([new Date('1/1/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/8/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/15/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/22/2014').getTime(), Math.ceil(Math.random() * 10)]);
var
bars = {
data: myData,
bars: {
show: true,
barWidth: 0.8,
lineWidth: 20,
}
};
graph = Flotr.draw(
container, [bars], {
yaxis: {
min: 0,
max: 11
},
xaxis: {
mode: 'time',
timeMode: 'local',
min: (new Date('1/1/2014').getTime() - (7 * 24 * 60 * 60 * 1000)),
max: (new Date('1/22/2014').getTime() + (7 * 24 * 60 * 60 * 1000))
}
});
})(document.getElementById("editor-render-0"));
});
在flot中有没有办法重新调整这些条形图?
答案 0 :(得分:1)
总是在第11个小时我发布我的问题,并且总是在第11个小时我找到解决方案。
http://jsfiddle.net/1jgb2k6r/10/
基本上,图表库的flot系列在日期时间计算中有一个完整的错误。它们都会在图表上遇到与时间轴相关的严重浮点舍入误差,这会导致柱子在预期的绘图位置的左边摆动。
以下是getTimeScale函数的示例,该函数从纪元时间(从2014年1月1日起〜2200开始)返回日期作为周数:
function getTimeScale(date){
return (new Date(date).getTime() / 1000 / 60 / 60 / 24 / 7);
}
此函数应用于数据系列中的日期参数,返回不是数十万的数量级的标准化数字:
$(function () {
(function color_gradients(container) {
var myData = [];
myData.push([getTimeScale('1/1/2014'),Math.ceil(Math.random() * 10)]);
myData.push([getTimeScale('1/8/2014'),Math.ceil(Math.random() * 10)]);
myData.push([getTimeScale('1/15/2014'), Math.ceil(Math.random() * 10)]);
myData.push([getTimeScale('1/22/2014'), Math.ceil(Math.random() * 10)]);
var bars = {
data: myData,
bars: {
show: true,
barWidth: 0.8,
lineWidth: 1,
}
};
graph = Flotr.draw(
container, [bars], {
yaxis: {
min: 0,
max: 11
},
xaxis: {
ticks: ticks,
min: (getTimeScale('1/1/2014') - 1),
max: (getTimeScale('1/22/2014') + 1)
}
});
})(document.getElementById("editor-render-0"));
});
为了再次将刻度显示为日期时间,您必须明确指定刻度:
var ticks = [];
ticks.push([getTimeScale('1/1/2014'), '1/1/2014']);
ticks.push([getTimeScale('1/8/2014'), '1/8/2014']);
ticks.push([getTimeScale('1/15/2014'), '1/15/2014']);
ticks.push([getTimeScale('1/22/2014'), '1/22/2014']);
graph = Flotr.draw(
container, [bars], {
yaxis: {
min: 0,
max: 11
},
xaxis: {
ticks: ticks,
min: (getTimeScale('1/1/2014') - 1), //gives a little padding room on the graph
max: (getTimeScale('1/22/2014') + 1) //gives a little padding room on the graph
}
});