开发者

Set minimum data interval for y axes on Highcharts

开发者 https://www.devze.com 2023-04-08 11:50 出处:网络
I need to plot a chart using Highcharts, and I have to sort of round down data not to plot very little variations around small values.

I need to plot a chart using Highcharts, and I have to sort of round down data not to plot very little variations around small values.

Eg. I have yAxis data that moves between 0 and 10, and the plot is ok. Eg. I have yAxis data开发者_Go百科 that moves between 0.0003 and 0.00031 and the plot will show too much detailed info.

I need to find a way to make the chart plot data so that I can appreciate variations of +- 0.01, and nothing more, without imposing max and min parameters, so that the chart will auto define its bounds. Also, I do not want to round down each data point, since I want to be able to zoom in the chart freely.

Do you know how to achieve this using Highcharts? Thank you!


The solution is to calculate the tickInterval based on how many ticks you want to see in the y-axis.

Say you want to see only 10 ticks (to keep the chart neat) you could do something like this http://jsfiddle.net/W9xKR/9/

The code example also sets a minimum tick interval of 0.01, so you will never see grid lines below this number, which will give you your desired level of detail.

If you fiddle with the data array in that example you will see that

var data = [ 0.0001, 0.0003, 0.000305, 0.000306, 0.000307, 0.000309, 0.00031, 0.01, 0.035, 0.07, 0.15, 3];

will give you 10 ticks set 0.3 apart. However, if you remove the larger values from the data set:

var data = [ 0.0001, 0.0003, 0.000305, 0.000306, 0.000307, 0.000309, 0.00031, 0.01, 0.035];

you will get only 6 ticks set 0.01 apart.

Note that you will have to recalculate this on zoom if you want to maintain the same number of ticks at each zoom level.


See if this helps you:

alignTicks: false

See here http://jsfiddle.net/highcharts/ebuTs/3735/. Delete the alignTicks from the code to see the difference.

0

精彩评论

暂无评论...
验证码 换一张
取 消