Javascript 带有条形图日期的Flotr2错误
我有一个flotr2图形,应该显示其中的一些数据: 编辑:Chrome用户:请注意,这个JSFIDLE在Chrome中似乎不起作用,不知道为什么 我的问题是,我的条形图在它们所代表的日期内没有居中对齐Javascript 带有条形图日期的Flotr2错误,javascript,graphing,flotr2,Javascript,Graphing,Flotr2,我有一个flotr2图形,应该显示其中的一些数据: 编辑:Chrome用户:请注意,这个JSFIDLE在Chrome中似乎不起作用,不知道为什么 我的问题是,我的条形图在它们所代表的日期内没有居中对齐 $(function () { (function color_gradients(container) { var myData = []; myData.push([new Date('1/1/2014').getTime(), Math.ceil(
$(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中有没有办法重新排列这些条?我总是在最后一个小时发布我的问题,总是在最后一个小时找到解决方案 基本上,图形库的flot行在其日期时间计算中有一个完整的bug。它们都存在严重的浮点舍入误差,与图形上的时间轴有关,这会导致条形图摆振到其预期绘图位置的左侧 下面是getTimeScale函数的一个示例,该函数从历元时间(从2014年1月1日~2200开始)以周数形式返回日期: 此函数应用于数据系列中的日期参数,返回的标准化数字不是数十万:
$(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
}
});
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
}
});