Jquery flot和周数

时间:2010-01-03 12:12:46

标签: jquery graph plot flot week-number

我创建了一个页面,用星期数来绘制平均雪深度。现在我们进入了2010年第1周,我的图表延伸了x轴(每周)的间隔。 我想要的是x轴上的周数(51,52,1,2等)和固定的间隔宽度。 有谁知道怎么做?

example

<script id="source" language="javascript" type="text/javascript">
$(function () {

var d1 = [
[201001,118],[200952,112],[200951,102],[200950,97],[200949,93],
[200948,41],[200947,10],[200947,0]];

var d2 = [
[201001,33],[200952,31],[200951,31],[200950,25],[200949,23],
[200948,12],[200947,0],[200947,0]];

$.plot($("#placeholder"),
   [{data:d1,lines:{show: true},
     points:{show: true},label:"Mountain"},
    {data:d2,lines:{show: true},points:{show: true},label:"Valley"}],
    {xaxis: {tickSize:1, tickDecimals:0 }}
);

});
</script>

2 个答案:

答案 0 :(得分:3)

你可以为x轴定义一组'刻度',并在那里映射你的周数

{xaxis: 
    {
        ticks: [[201001,'1'],[200952,'52'],[200951,'51'],....]
        tickSize:1, 
        tickDecimals:0
    }
}

V2 - 似乎有效,请参阅flot chart

<div id="placeholder" style="width:600px;height:300px;"></div> 
<script id="source" language="javascript" type="text/javascript">
$(function () {

var d1 = [
[200952,112],[200951,102],[200950,97],[200949,93],[200948,41],[200947,10],[200946,0]];

var d2 = [
[200952,31],[200951,31],[200950,25],[200949,23],[200948,12],[200947,0],[200946,0]];

$.plot($("#placeholder"),
   [{data:d1,lines:{show: true},
     points:{show: true},label:"Mountain"},
    {data:d2,lines:{show: true},points:{show: true},label:"Valley"}],
    {xaxis: {
        ticks: [[200952,'52'],[200951,'51'],[200950,'50'],[200949,'49'],[200948,'48'],[200947,'47'],[200946,'46']],
        tickSize:1, tickDecimals:1 }}
);

});
</script>

似乎'200947'在您的数据集中两次。

答案 1 :(得分:-1)

尝试在tickformatter中编写一个函数,将直线集转换为周数。

例如:

xaxis: {        
    tickFormatter: function suffixFormatter(val, axis) {                
        return (val.toFixed(axis.tickDecimals) + 49) % 52;
    }
}

我没有测试过此代码,类型转换可能存在一些问题。它应该取你的(0,1,2,...)集,并将其转换为新集(49,50,51,52,1,2,...),因此,当你绘制你的几周内,在您的数据中,致电周49 0,它将显示一周。为了进一步提高灵活性,您可以将返回值替换为返回'“week”+((val.toFixed(axis.tickDecimals)+ 49)%52);'这样你的刻度显示'第1周','第2周'等等。

有关详细信息,请参阅“自定义轴”下的flot api。