Question

我正在使用图表的flot图表。请找到以下......

js array

        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中没有显示正确的时间，如果我使用00:00，它总是显示所有x轴的timeformat: '%H:%M'它工作正常如果我将其格式化为日期。

请帮助，谢谢。

Answer 1

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

在我看来，像this之类的东西对你的数据更有意义。

FLOT图表xAxis时间

1 个答案: