blocks|key|1491953|text|取最长的约为0的线段(如果0不在该范围内，则取整个图)-例如，如果您的范围是-5，1，则取-5,0。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491954|以滴答为单位，计算出此数据段的大致长度。这只是长度除以刻度的宽度。所以假设这个方法说我们可以把11个刻度放在-5到0之间。这是我们的上限。对于较短的一侧，我们将只在较长的一侧镜像结果。|1491955|现在尝试放入尽可能多(最多11个)的刻度，每个刻度的标记形式为i*10*10%5En，i*5*10%5En，i*2*10%5En，其中n是整数，i是刻度的索引。现在这是一个优化问题-我们希望最大化我们可以放入的刻度数，同时最小化最后一个刻度和结果结束之间的距离。因此，为获得尽可能多的刻度分配一个分数，小于我们的上限，并分配一个分数，使最后一个刻度接近n-你必须在这里进行实验。|1491956|在上面的例子中，尝试n=+1。我们得到1tick(在i=0)。N=2给我们1个刻度，我们离下限更远，所以我们知道我们必须走另一条路。N=0给我们6个刻度，在每个整数点上。N=+-1给我们12个刻度(0，-0.5，...，-5.0)。N=+-2表示24个刻度，依此类推。评分算法将给他们每个人一个分数-越高意味着更好的方法。|1491957|对i*5*+10%5En和i*2*10%5En再次执行此操作，并取得分最高的那个。|1491958|(作为评分算法的示例，假设得分是到最后一次刻度的距离乘以最大刻度数减去所需数量。这可能会很糟糕，但它将作为一个良好的起点)。|1491959|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

Take the longest of the segments about zero (or the whole graph, if zero is not in the range) - for example, if you have something on the range [-5, 1], take [-5,0].

Figure out approximately how long this segment will be, in ticks. This is just dividing the length by the width of a tick. So suppose the method says that we can put 11 ticks in from -5 to 0. This is our upper bound. For the shorter side, we'll just mirror the result on the longer side.

Now try to put in as many (up to 11) ticks in, such that the marker for each tick in the form i*10*10^n, i*5*10^n, i*2*10^n, where n is an integer, and i is the index of the tick. Now it's an optimization problem - we want to maximize the number of ticks we can put in, while at the same time minimizing the distance between the last tick and the end of the result. So assign a score for getting as many ticks as we can, less than our upper bound, and assign a score to getting the last tick close to n - you'll have to experiment here.

In the above example, try n = 1. We get 1 tick (at i=0). n = 2 gives us 1 tick, and we're further from the lower bound, so we know that we have to go the other way. n = 0 gives us 6 ticks, at each integer point point. n = -1 gives us 12 ticks (0, -0.5, ..., -5.0). n = -2 gives us 24 ticks, and so on. The scoring algorithm will give them each a score - higher means a better method.

Do this again for the i * 5 * 10^n, and i*2*10^n, and take the one with the best score.

(as an example scoring algorithm, say that the score is the distance to the last tick times the maximum number of ticks minus the number needed. This will likely be bad, but it'll serve as a decent starting point).

blocks|key|1491999|text|我一直在使用jQuery+flot图形库。它是开源的，可以很好地生成轴/刻度。我建议看看它的代码，并从中提取一些想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1492000|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/flot/flot/blob/master/API.md^0|D|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I've been using the jQuery <a href="https://github.com/flot/flot/blob/master/API.md" rel="nofollow noreferrer">flot</a> graph library. It's open source and does axis/tick generation quite well. I'd suggest looking at it's code and pinching some ideas from there.

blocks|key|1707088|text|这个简单的算法产生的间隔是10的幂的1、2或5的倍数，并且轴范围被划分为至少5个间隔。代码示例使用java语言编写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707089|protected+double+calculateInterval(double+range)+{
++++double+x+=+Math.pow(10.0,+Math.floor(Math.log10(range)));
++++if+(range+/+x+>=+5)
++++++++return+x;
++++else+if+(range+/+(x+/+2.0)+>=+5)
++++++++return+x+/+2.0;
++++else
++++++++return+x+/+5.0;
}|code-block|syntax|javascript|1707090|这是另一种选择，间隔至少为10次：|1707091|protected+double+calculateInterval(double+range)+{
++++double+x+=+Math.pow(10.0,+Math.floor(Math.log10(range)));
++++if+(range+/+(x+/+2.0)+>=+10)
++++++++return+x+/+2.0;
++++else+if+(range+/+(x+/+5.0)+>=+10)
++++++++return+x+/+5.0;
++++else
++++++++return+x+/+10.0;
}|1707092|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This simple algorithm yields an interval that is multiple of 1, 2, or 5 times a power of 10. And the axis range gets divided in at least 5 intervals. The code sample is in java language:

<pre><code>protected double calculateInterval(double range) {
 double x = Math.pow(10.0, Math.floor(Math.log10(range)));
 if (range / x &gt;= 5)
 return x;
 else if (range / (x / 2.0) &gt;= 5)
 return x / 2.0;
 else
 return x / 5.0;
}
</code></pre>

This is an alternative, for minimum 10 intervals:

<pre><code>protected double calculateInterval(double range) {
 double x = Math.pow(10.0, Math.floor(Math.log10(range)));
 if (range / (x / 2.0) &gt;= 10)
 return x / 2.0;
 else if (range / (x / 5.0) &gt;= 10)
 return x / 5.0;
 else
 return x / 10.0;
}
</code></pre>

I'm looking for an algorithm that places tick marks on an axis, given a range to display, a width to display it in, and a function to measure a string width for a tick mark.

For example, given that I need to display between 1e-6 and 5e-6 and a width to display in pixels, the algorithm would determine that I should put tickmarks (for example) at 1e-6, 2e-6, 3e-6, 4e-6, and 5e-6. Given a smaller width, it might decide that the optimal placement is only at the even positions, i.e. 2e-6 and 4e-6 (since putting more tickmarks would cause them to overlap).

A smart algorithm would give preference to tickmarks at multiples of 10, 5, and 2. Also, a smart algorithm would be symmetric around zero.

Tickmark algorithm for a graph axis

jQuery

我正在寻找一种算法，可以将刻度线放置在轴上，给定要显示的范围，显示刻度线的宽度，以及测量刻度线的字符串宽度的函数。例如，假设我需要在1e-6和5e-6之间显示，以及要以像素为单位显示的宽度，算法将确定我应该在1e-6、2e-6、3e-6、4e-6和5e-6处放置刻度线(例如)。给定较小的宽度，它可能会决定最佳位置仅在偶...

问图形轴的刻度线算法
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图形轴的刻度线算法EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图形轴的刻度线算法
EN