jQuery的海军报线图与月，年中的x轴 [英] jQuery Flot line chart with month,year in x-axis

问题描述

我试图产生x轴采用以月为一图，一年。请检查下面例如：

对于图中的数据是通过AJAX获得。请检查下面的示例JSON：

<$p$p><$c$c>{"total":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],"critical":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],"high":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],"medium":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],"low":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]}

在上面的例子中[2013,4,0]应转化到x轴：年04月到2013年，Y轴：0

您可以请让我知道我如何能做到这一点？

感谢。

解决方案

下面是我会怎么做：

  //你的JSON
OBJ = {"total":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],"critical":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],"high":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],"medium":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],"low":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]};

//重新格式化成格式海军报喜欢
seriesData = [];
为（在OBJ VAR道具）{
    //推的系列，财产的标签
    //使用$ .MAP产生的数组[日期，y值]
    //新的日期（I [0]，1 [1] -1）.getTime（）
    //会给你的月/年的第一天划时代的时间
    seriesData.push（{标签：道具，数据：$图（OBJ [道具]，功能（I，J）{
         返回[[新日期（ⅰ[0]，I [1] -1）.getTime（）中，i [2]]];
    }）}）;
}

//绘制它！
$ .plot（＃占位，seriesData，{
    x轴：{模式：时间，TIMEFORMAT：％B％Y}
}）;
 

小提琴这里。

编辑：又改为Ĵ按 I [2] ，以显示正确的数据绘制

I'm trying to generate a graph with month,year in x-axis. Please check below for ex:

The data for the graph is obtained via ajax. Please check below for sample json:

{"total":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],"critical":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],"high":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],"medium":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],"low":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]}

In the above example [2013,4,0] should translate to x-axis: Apr 2013, y-axis: 0.

Can you please let me know how i can achieve this?

Thanks.

解决方案

Here's how I'd do it:

// your JSON
obj = {"total":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],"critical":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],"high":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],"medium":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],"low":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]};

// reformat into the format flot likes
seriesData = [];    
for (var prop in obj) {
    // push in the series, the "property" is the label
    // use $.map to produce an array of [date, y-value]
    // the new Date(i[0],i[1]-1).getTime(), 
    // will give you the epoch time for the first day of that month/year
    seriesData.push({label: prop, data:$.map(obj[prop], function(i,j){
         return [[new Date(i[0],i[1]-1).getTime(), i[2]]];
    })});    
}

// plot it!
$.plot("#placeholder", seriesData, {
    xaxis: { mode: "time", timeformat: "%b %Y" }
});

Fiddle here.

Edit: It was changed j by i[2] in order to display the data correctly plotted.

这篇关于jQuery的海军报线图与月，年中的x轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！