jqPlot图表,缩放31天

时间:2012-04-17 16:31:58

标签: jquery jqplot

我想创建一个包含31天数据的图表,然后使用放大我希望能够放大日期,例如7天,如果我要突出显示7天。

我遇到的问题是我希望x轴上的标签从第一天开始,最后一个标签是最后一天,但jqPlot似乎因某种原因增加了几天。

例如,在我的数据下面,它以21开始x轴,最后一个是26,但我希望它显示从22到23的每一天。 我尝试使用min和max,但只有一个工作。

我还希望每天显示1,2,3,4等,而不是目前的1,5,12,19等。

我也注意到当你放大它有时它有3,4,4,4,5,5,5,6等我总是想要它每天。

这是我目前的代码:

$(document).ready(function(){
        s1 = [["6/22/2012",425.32], ["6/23/2012",424.84], ["6/24/2012",417.23], ["6/25/2012",390],
            ["6/26/2012",393.69], ["6/27/2012",392.24], ["6/28/2012",369.78], ["6/29/2012",330.16], ["6/30/2012",308.57],
            ["7/1/2012",346.45], ["7/2/2012",371.28], ["7/3/2012",324.7], ["7/4/2012",315.07], ["7/5/2012",300.36],
            ["7/6/2012",315.76], ["7/7/2012",292.96], ["7/8/2012",310.02], ["7/9/2012",359.36], ["7/10/2012",372.54],
            ["7/11/2012",386.91], ["7/12/2012",449.15], ["7/13/2012",444.25], ["7/14/2012",463.29],  ["7/15/2012",510.15],
            ["7/16/2012",467.86],["7/17/2012",467.86], ["7/18/2012",481.32], ["7/19/2012",537], ["7/20/2012",546.43], ["7/21/2012",567],
            ["7/22/2012",544.62], ["7/23/2012",573.2]];



        var plot1 = $.jqplot('chart1', [s1], {
            title: 'test',
            series: [{
                label: 'test',
                renderer:$.jqplot.BarRenderer
            }],
            axes: {
                xaxis: {
                    renderer:$.jqplot.DateAxisRenderer,

                    tickOptions:{formatString:"%#d"}
                },
                yaxis: {
                    // renderer: $.jqplot.LogAxisRenderer,
                    tickOptions:{
                        formatString:'$%.2f'
                    }
                }
            },
            cursor:{
                show: true,
                zoom: true,
                constrainZoomTo: 'x'
            }
        });
    });

任何人都可以帮我吗?

1 个答案:

答案 0 :(得分:3)

通过添加numberTicks以及min&最大:

xaxis: {
                    renderer:$.jqplot.DateAxisRenderer,
                    min: '6/22/2012',
                    max:   '7/23/2012',
                    numberTicks: 31,
                    tickOptions:{formatString:"%#d"}
                },

它解决了额外天数的问题以及缩放现在正常工作