FLOT 图表 xAxis 时间

Question

我正在为图表使用浮动图表。请找到以下...

js 数组

        data_visits = [
                        [new Date('06/02/2014 01:00').getTime(), 100], 
                        [new Date('06/05/2014 10:00').getTime(), 200], 
                        [new Date('06/10/2014 13:00').getTime(), 300], 
                        [new Date('06/15/2014 15:00').getTime(), 400],
                      ];

图表代码

    if($('#flot_overview').length) {
        var chart_placeholder = $('#flot_overview');

        var options = {
            grid: {
                clickable: true, 
                hoverable: true,
                autoHighlight: true,
                backgroundColor: null,
                borderWidth: 0,
                color: "#666",
                labelMargin: 10,
                axisMargin: 0,
                mouseActiveRadius: 10,
                minBorderMargin: 5
            },
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    steps: false,
                    fill: true
                },
                points: {
                    show:true,
                    radius: 4,
                    symbol: "circle",
                    fill: true
                }
            },
            tooltip: true,
            tooltipOpts: {
                content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
                xDateFormat: "%b %d, %Y %H:%M",
                shifts: {
                    x: 20,
                    y: 0
                },
                defaultTheme: false
            },
            xaxis: {
                mode: "time",
                minTickSize: [1, "hour"],
                timeformat: '%H:%M',
                labelWidth: "40"
            },
            yaxis: { min: 0 },
            legend: {
                noColumns: 0,
                position: "ne"
            },
            colors: ["#0892cd"],
            shadowSize: 0
        };

        $.plot(chart_placeholder,[{
            label: "Click / Visits",
            data: data_visits,
            points: {fillColor: '#fff'},
            lines: {fillColor: 'rgba(8,146,205,.2)'}
        }],options);
    }

它会正确生成图表并在工具提示中显示正确的时间，但根据我的设置，它不会在 xAxis 中显示正确的时间，如果我使用 timeformat: '%H:%M'，它总是为所有 xaxis 显示 00:00 如果我格式化它，它可以正常工作作为日期。

请帮忙，谢谢。

Answer 1

由于您的数据跨越多天，flot 在逻辑上将刻度标记放置在每天的开始。这意味着使用'%H:%M' 的时间格式，您将得到 0:00。

在我看来，this 这样的东西对您的数据更有意义。