JQuery-使用FlotCharts绘制php中的时间序列数据


JQuery - plot time series data from php using Flot Charts

我从数据库中获取数据,该数据库使用php进行格式化,并作为Ajax调用的JSON响应返回。每件事都很好,数据都被绘制出来了。但如果X轴包含日期,则不会绘制任何内容。我使用Ajax提交开始日期和结束日期。这是我作为响应生成的数据:

[
  {
    "data": [
      [
        "2014-11-02",
        5
      ],
      [
        "2014-11-04",
        12
      ],
      [
        "2014-11-07",
        2
      ],
      [
        "2014-11-13",
        21
      ]
    ],
    "label": "Label1",
    "color": 8
  }
]

我的x轴:

xaxes : [ {
            mode : "time",
            timeformat : "%y-%m-%d",
            color : "black",
            axisLabel : "Date",
            axisLabelUseCanvas : true,
            axisLabelFontSizePixels : 12,
            axisLabelFontFamily : 'Verdana, Arial',
            axisLabelPadding : 10
        }],

我遵循了教程:http://www.jqueryflottutorial.com/how-to-make-jquery-flot-time-series-chart.html但在使用ajax响应中的数据时,无法弄清楚如何使用它。

此外,如何根据开始日期和结束日期自动划分刻度?

请参阅我上面的评论。乍一看,您似乎需要将此属性添加到xaxis对象中:

timeformat:"%y/%m/%d"

JSON中的日期需要是一个日期对象,flot在时间模式下需要该对象。所以以下对我有效:(在传递到flot之前将字符串日期转换为date对象):

var graph_json = $.parseJSON(data);
var j, i;
for(j=0;j<graph_json.length;j++){
    for(i=0;i<graph_json[j].data.length;i++){
        graph_json[j].data[i][0] = new Date(graph_json[j].data[i][0]);
    }
}