绘制图表 - 动态更改y轴

时间:2014-05-28 08:33:20

标签: jquery flot

我是flot的新手,但设法很快就设置了我的时间图。这是我基于时间的情节:

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

当用户点击按钮时我想更改图表以仅显示[d]的一部分 - 例如,如果[d]包含2013年和2014年的数据,我想仅显示2013年。他们有这样的例子在flot示例中(http://www.flotcharts.org/flot/examples/axes-time/index.html)。因此,在我的按钮单击中,我几乎完成了示例显示的内容,如下所示:

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

并且它工作正常 - 除了Y轴刻度不会根据2013的最小值和最大值重新生成。这很难看,所以我查找了一个解决方案并尝试了这段代码:

     $("#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();
    });

但是当我运行它时,y轴不会改变。

任何人都可以帮我弄清楚我做错了什么吗?

1 个答案:

答案 0 :(得分:2)

我发现我需要设置tick size属性才能工作:

    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();