How to calculate axis ticks at a uniform distribution?
Given a data range by its minimum and maximum value, how can one calculate the distribution of buckets on a an axis?
The requirements are: - The axis ticks shall be evenly distributed (equal size). - Further, all ticks shall appear as numbers like10, 20, 30, ...
or -0.3, 0.1, 0.2, 0.4, ...
- The calculation shall accept a parameter that defines the number of buckets wanted.
The following example calculates a maximum of 10 buckets or less.
num buckets = 10
range length = 500
500 / 10 = 50
log_10(50) = 1,69
round up(1,69) = 2
10^2 = 100 bucket size
500 / 100 = 5 buckets
Resu开发者_开发问答lt: There are 5 buckets each at a size of 100.
The steps only produce buckets that are based on10^x
which are 0.01, 0.1, 1, 10, 100, 1000 ...
How can one calculate the buckets size for exactly 42 buckets?
I am not sure but i think this code can help you (Adapted from JavaScript YUI YAHOO.util.DragDrop.js)
var initPosition = 0;
var rangeLength = 500;
var maxPosition = (initPosition + rangeLength);
getTicks: function(bucketSize) {
var axisTicks = [];
var tickMap = {};
for (i = initPosition; i <= maxPosition; i = i + bucketSize) {
if (!tickMap[i]) {
axisTicks[axisTicks.length] = i;
tickMap[i] = true;
}
}
return axisTicks;
}
The drawback is because, sometimes, the axis ticks will not be evenly distributed ((initPosition + rangeLength) / bucketSize) does not return a plain integer
精彩评论