簡體   English   中英

FLOT圖表x軸時間

[英]FLOT Chart xAxis time

我正在使用浮點圖作為圖表。 請找到以下...

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 ,如果工作正常,我將其格式化為日期。

請幫忙,謝謝。

由於您的數據跨越數天,因此flot邏輯上將刻度線放置在每一天的開始 這意味着時間格式為'%H:%M' ,您將獲得0:00。

在我的腦海里像這樣使得很多更有意義的數據你。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM