Highcharts：Y轴网格线错位

Question

Highcharts：Y轴网格线错位

3

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

JSFiddle代码演示问题：JSFiddle 我希望“降雨量”轴的标签位置与“温度”轴上的标签相对应。我可以简单地设置gridLineWidth: 0来隐藏错误的网格线，但是标签仍然错位。是否有简单的方法解决这个问题？我已经尝试使用tickPositioner功能来解决，但这似乎是一个复杂的解决方案，而不应该是一个常见的问题。

- zplizzi

对数轴没有正常的刻度间隔，因此您无法对齐这两种类型。 - Sebastian Bochan

即使使用对数轴，也应该能够计算出第二个轴标签的值，这些值与第一个轴标签/网格线的位置相对应 - 尽管标签可能不是整数值，但应该存在一种映射关系。 - zplizzi

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zplizzi · Answer 1

最终我使用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个均匀分布的刻度）。这对于对数刻度来说有效，因为在取对数之前先设置刻度位置值，使得刻度值最终以均匀间隔出现在对数图上。

- SteveP · Answer 2

它们没有对齐的原因是你的对数轴没有从零开始。在对数轴上不能有零，但是通过设置最小值为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/