Question

首先，请原谅我的英语！我想用jquery显示一个flot图表。我的代码如下：

charts.chart_simple = 
{
    // data
    data: 
    {
        d1: []
    },

    // will hold the chart object
    plot: null,

    // chart options
    options: 
    {
        grid: 
        {
            color: "#dedede",
            borderWidth: 1,
            borderColor: "transparent",
            clickable: true, 
            hoverable: true
        },
        series: {
            lines: {
                show: true,
                fill: false,
                lineWidth: 2,
                steps: false
            },
            points: {
                show:true,
                radius: 5,
                lineWidth: 3,
                fill: true,
                fillColor: "#000"
            }
        },
        xaxis: {
            mode: "time",
            tickColor: 'transparent',
            tickDecimals: 2,
            tickSize: 2
        },
        yaxis: {
            tickSize: 10
        },
        legend: { position: "nw", noColumns: 2, backgroundColor: null,                   backgroundOpacity: 0 },
        shadowSize: 0,
        tooltip: true,
        tooltipOpts: {
            content: "%s : %y.3",
            shifts: {
                x: -30,
                y: -50
            },
            defaultTheme: false
        }
    },

    placeholder: "#chart_simple",

    // initialize
    init: function()
    {
        // this.options.colors = ["#72af46", "#466baf"];
        this.options.colors = [successColor, primaryColor];
        this.options.grid.backgroundColor = { colors: ["#fff", "#fff"]};

        var that = this;

        if (this.plot == null)
        {
            this.data.d1 = new Array();
            var o = 0;
            for(var i = 0; i < data.length; i++){                   
                var group = data[i];

                for(var e = 0; e < group.length; e++){                      
                    var elem = new Array(date, intVal);

                    this.data.d1[o] = elem;
                    o++;
                }                   
            }               
        }
        this.plot = $.plot(
            $(this.placeholder),
            [{
                label: "Consumo Medio", 
                data: this.data.d1,
                lines: { fill: 0.05 },
                points: { fillColor: "#fff" }
            }], this.options);
    }
};

// uncomment to init on load
charts.chart_simple.init();

问题是变量“date”。如果我把一个数字，它完美地工作。变量“date”具有以下格式 - ＆gt; 2014年2月26日

Answer 1

您必须使用时间戳。有关说明和示例，请参阅documentation。

Answer 2

非常感谢您的回复。

最后我找到了解决方案。

var data1 = new Array();
    var o = 0;

    for(var i = 0; i < data.length; i++){

        var group = data[i];

        for(var e = 0; e < group.length; e++){

            var date = group[e][0];
            var year = date.substring(0,4)
            var month = date.substring(5,7)
            var day = date.substring(8,10)
            console.log(year + " | " + month + " | " + day);

            var elem = new Array(gd(year, month, day), (group[e][1]/group[e][2]));

            data1[o] = elem;
            o++;
        }

    }

var dataset = [
    {
        label: "Consumo Semana",
        data: data1,
        color: "#FF0000",
        xaxis:2,
        points: { fillColor: "#FF0000", show: true },
        lines: { show: true }
    }
];

var dayOfWeek = ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"];

var options = {
        series: {
             shadowSize: 5
        },
        xaxis: {
            mode: "time",
            tickSize: [1, "month"],
            tickLength: 0,
            axisLabel: "2012",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        },
       yaxis: {
            color: "black",
            tickDecimals: 2,
            axisLabel: "Gold Price  in USD/oz",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 5
        },
        xaxes: [{
            mode: "time",       
            tickFormatter: function (val, axis) {           
                return dayOfWeek[new Date(val).getDay()];
            },
            color: "black",
            position: "top",       
            axisLabel: "Weekday",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 5
        },
        {
            mode: "time",
            timeformat: "%d/%m",
            tickSize: [1, "day"],
            color: "black",       
            axisLabel: "Date",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        }],
        grid: {
            hoverable: true,
            borderWidth: 2,
            borderColor: "#633200",
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        },
        colors: ["#FF0000", "#0022FF"]
    };


        $.plot($("#chart_simple_2"), dataset, options);


function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}

问题在于我引入日期数据的方式。通过本教程，我找到了答案。

http://www.jqueryflottutorial.com/how-to-make-jquery-flot-time-series-chart.html

再次感谢你！

问候！

Flot Chart显示日期

2 个答案: