绘制图表 - 动态更改y轴 [英] Flot charts - changing the y axis on the fly
问题描述
我是flot的新手,但设法很快就设置了我的时间图。这是我基于时间的情节:
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()
}
});
当用户点击按钮时我想更改图表以仅显示[d]的一部分 - 例如,如果[d]包含2013年和2014年的数据,我只想显示2013年。他们在flot示例中有这样的例子( http://www.flotcharts.org/flot/examples/axes-time/index.html )。因此,在我的按钮单击中我几乎完成了示例显示的内容,如下所示:
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()
}
});
});
并且工作正常 - 除了Y轴刻度不会根据最小值和最大值重新生成2013年。这很难看,所以我查找了一个解决方案并尝试了这段代码:
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();
});
但是当我运行它时,y轴不会改变。
But when I run this, the y axis doesn't change.
任何人都可以帮我弄清楚我做错了什么吗?
Can anyone help me figure out what I am doing wrong?
推荐答案
我发现我需要设置tick size属性才能生效:
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();
这篇关于绘制图表 - 动态更改y轴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!