Flotr2错误与条形图日期

时间:2014-11-20 15:03:08

标签: javascript graphing flotr2

我有一个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中有没有办法重新调整这些条形图?

1 个答案:

答案 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
        }
});