jquery - Jquery 浮点数和周数

Question

我做了一个页面来按周数绘制平均积雪深度。现在我们进入 2010 年第 1 周，我的图表在 x 轴（年周）上延伸了区间。我想要的是 x 轴上的周数（51、52、1、2 等），以及固定的间隔宽度。有谁知道该怎么做？

例子

<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>

Answer 1

您可以为 x 轴定义一组“刻度”，并在那里映射您的周数

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

V2 - 似乎工作，请参阅流动图

<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”在您的数据集中出现了两次。

Answer 2

尝试在 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 周，它将显示为一周。为了获得更大的灵活性，您可以将返回值替换为 return '"week" + ((val.toFixed(axis.tickDecimals) + 49) % 52);' 以便您的刻度显示“第 1 周”、“第 2 周”等。

有关更多信息，请参阅“自定义轴”下的 flot api。