Question

我正在使用Flot创建图表。数据是使用条形图显示的特定日期的价格。它目前看起来像这样： enter image description here

在上图中，您还可以看到我的问题：x轴与工具提示中的x轴不对应。我希望轴正确映射，并且灰色条与周末对应。目前，10月10日和11日是在周末酒吧，10月11日和12月是真正的周末。使用AJAX检索数据。

我现在的代码是：

var options = {
    xaxis: {
        mode: "time",
        timeformat: '%e %b',
        minTickSize: [1, "day"],
        autoscaleMargin: 0.02
    },
    selection: {
        mode: "x"
    },
    grid: {
        hoverable: true,
        markings: weekendAreas
    },
    bars: {
        show: true,
        barWidth: 86400000 // 1 day in seconds
    },
    tooltip: true,
    tooltipOpts: {
        content: "%s on %x: &euro; %y.2",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    series: {
        stack: true
    }
};

$.getJSON(graphOptions.route, function (data) {
    options['xaxis']['min'] = data.from;
    options['xaxis']['max'] = data.to;
    var plot = $.plot("#flot-cost-chart", data.data, options);
}).fail(function (e) {
    alert('An error occured');
});

graphOptions.route是我的网页提供的网址。检索到的数据如下所示：

{
"data": [
    {
        "label": "Test 1",
        "data": [
            [
                1413064800000,
                173.1
            ],
            [
                1413583200000,
                104
            ],
            [
                1412978400000,
                100
            ]
        ]
    },
    {
        "label": "Test 3",
        "data": [
            [
                1413064800000,
                112
            ]
        ]
    },
    {
        "label": "Test 2",
        "data": [
            [
                1413064800000,
                130
            ],
            [
                1413151200000,
                112
            ]
        ]
    }
],
"to": 1414796400000,
"from": 1412114400000
}

有人知道如何解决这个问题吗？

Answer 1

这里有一些问题：

条形对齐：条形图左对齐。在栏内选项中尝试align: center。
周末酒吧是10月11日和10月12日（见上文）。
您的测试2 - 112值是在10月13日午夜 UTC ，这在图表中似乎是正确的。当您处于另一个时区时，工具提示可以显示另一个日期。

创建一天宽度的条形，并在Flot中的x轴上进行正确的映射

1 个答案: