Highcharts：Y 轴网格线未对齐答案

【问题标题】：Highcharts: Y-Axis Grid Lines MisalignedHighcharts：Y 轴网格线未对齐
【发布时间】：2014-07-02 21:08:14
【问题描述】：

我正在尝试在 Highcharts 中创建一个包含多个数据系列的图表，每个系列都有不同的 y 轴。使用线性图表的标准功能（y 轴定义数组）可以正常工作。但是，当其中一个 y 轴被定义为对数时，网格线和轴标签就会错位。

JSFiddle 代码演示问题：JSFiddle

我希望“降雨”轴在与“温度”轴上的标签相对应的位置有标签。我可以简单地设置gridLineWidth: 0 来隐藏有问题的网格线，但是标签仍然没有对齐。有没有简单的方法来解决这个问题？我尝试了使用tickPositioner 功能的解决方案，但对于看似常见的问题，这似乎是一个复杂的解决方案。

【问题讨论】：

logartihm 轴在刻度之间没有固定的间隔，因此您无法对齐这两种类型。
即使使用对数轴，也应该可以计算与第一个轴标签/网格线的位置相对应的第二个轴标签的值 - 尽管标签可能不是整数值，但应该成为一个映射。

标签： javascript highcharts

【解决方案1】：

他们没有对齐的原因是你的对数轴不是从零开始的。对数轴不能为零，但可以通过将最小值设置为 1 来接近。

 , { // Secondary yAxis
        min:1,

http://jsfiddle.net/4LKW2/

但是，如果您想强制设置最小值和最大值，我认为您将不得不使用 tickPositioner 或 tickPositions 例如

tickPositions:[Math.log(24)/Math.log(10),Math.log(42)/Math.log(10),Math.log(73)/Math.log(10),Math.log(129)/Math.log(10),Math.log(225)/Math.log(10),Math.log(400)/Math.log(10)],

http://jsfiddle.net/SWrd6/

【讨论】：

我不想从零开始我的坐标轴 - 例如，如果我的数据范围从 10,000 到 100,000，这会在图表上产生大量不必要的空白。我也无法设置固定轴值，因为数据是动态的，并且图表的范围需要自动缩放。我会进一步研究tickPositioner，尽管这很困难。

【解决方案2】：

我最终使用tickPositioner 函数为我的问题创建了一个可行（但不理想）的解决方案：

tickPositioner: function () {
                if (this.tickInterval > .5) { 
                    return null;
                }
                else {
                    var myInterval = (this.max - this.min) / 5;
                    return [this.min, this.min + myInterval, this.min + 2 * myInterval, this.min + 3 * myInterval, this.min + 4 * myInterval, this.max];
                }
            }

if 子句检查 HighCharts 库是否会自动将刻度间隔设置为 10 的幂（已经均匀间隔），如果没有，只需手动设置刻度间隔（在本例中，5 均匀间隔）间隔刻度）。这适用于对数刻度，因为刻度位置值是在取对数之前设置的 - 允许偶数间隔刻度值最终在对数图上均匀分布。

【讨论】：