Flot charts - changing the y axis on the fly

问题:

I am new to flot, but managed to set my time graph pretty quickly. Here is my time based plot:

    $.plot("#placeholder", [d],
    {
        xaxis: {
            mode: "time",
            minTickSize: [1, "month"],
            min: (new Date(2008, 05, 20)).getTime(),
            max: (new Date(2014, 05, 27)).getTime()
        }
    });

when the user clicks a button I want to change the plot to show only a part of [d] - for instance, if [d] contains data for 2013 and 2014, I want to show only 2013. They have such example in flot examples (http://www.flotcharts.org/flot/examples/axes-time/index.html). So, in my button click I pretty much did what the example showed, something like this:

           $("#myBtn").click(function () {
                $.plot("#placeholder", [d], {
                    xaxis: {
                        mode: "time",
                        min: (new Date(2013, 06, 30)).getTime(),
                        max: (new Date(2013, 12, 30)).getTime()
                    }
                });
            });

and it worked fine - except the Y axis ticks do not get regenerated according the the min and max values of 2013. This was ugly, so I looked up a solution and tried this code:

     $("#myBtn").click(function () {

        plot.getOptions().yaxes[0].min = minVal;
        plot.getOptions().yaxes[0].max = maxVal;
        plot.setupGrid(); //only necessary if your new data will change the axes or grid
        plot.draw();
    });

But when I run this, the y axis doesn't change.

Can anyone help me figure out what I am doing wrong?

回答1:

I discovered that I needed to set the tick size property for this to work:

    plot.getOptions().yaxes[0].min = v1;
    plot.getOptions().yaxes[0].max = v2;
    plot.getOptions().yaxes[0].tickSize = 5;
    plot.setupGrid(); //only necessary if your new data will change the axes or grid
    plot.draw();