Javascript Highcharts记号位置未在多个Y轴上对齐

我在同一页上有多个图表，目标是所有图表上的每个指标都有相同的最大值，以便于比较图表（）

我尝试过使用“最大值”和“最小值”，但不起作用，可能是因为有多个y轴

现在我尝试使用tickpositions（我在后端计算）并将其传递给图表。但在相反的轴上，记号对齐存在问题，如图所示

下面是我如何设置刻度位置的代码的一小部分，以及我拥有的图表的更简单版本（我有更多的y轴）

---

如何在所有y轴上实现刻度对齐？

为了在两个轴上对齐刻度，可以使用两种不同的方法。 第一个是定义自己的

Axis.tickPositioner

函数，该函数返回根据需要调整的tickC计算数组

接下来，您需要在两个轴上获得相同数量的刻度，并且它们应该位于轴上相同的位置，因此定位器函数应该接收两个参数-

maxValueOfCurrentAxis

和

tickAmount

。我这样写函数：

var positioner = function(tAmount, axisMax) {
  var positions = []
  for (var i = 0; i < tAmount; i++) {
    positions.push(Math.round(((axisMax / tAmount) * i) * 100) / 100)
  }
  positions.push(axisMax)
  return function() {
    return positions
  }
}

实例：

解决这个问题的第二种方法是，在两个轴上使用

Axis.tickPixelInterval

属性，但不太适合您的需要。不需要更精确地解释它，因为API中有关于它的明确信息

实例：

API参考：

---

两个轴的刻度线彼此之间没有对齐，因为在这种情况下会破坏图表的逻辑。实际上，如果你想用

0.5

将刻度向上移动一点，从那一刻起，它将不再是

0.5

，而是更详细地说，大约

0.75

@daniel\s更详细地说，刻度在后端是如何计算的，它就像是

maxValueOfCurrentAxe/3

，所以基本上对我来说，刻度应该对齐，因为间隔将大致相同，而不像它们在图中显示的那么不同。所以结果是不好的，因为如果使用

maxValueOfCurrentAxe/3

公式，刻度应该与现在有点不同（

[0,0.5,1,2]

）。实际上，您不需要在后端计算它。下面我将向您展示如何正确计算它，因此请等待答案。很抱歉，响应太晚。谢谢，这是预期的工作！谢谢

var positioner = function(tAmount, axisMax) {
  var positions = []
  for (var i = 0; i < tAmount; i++) {
    positions.push(Math.round(((axisMax / tAmount) * i) * 100) / 100)
  }
  positions.push(axisMax)
  return function() {
    return positions
  }
}

 var tickAmount = 3
 var firstAxisMax = 15000000
 var secondAxisMax = 2

 yAxis: [{ // Primary yAxis
            labels: {
              format: '{value}',
              style: {
                color: Highcharts.getOptions().colors[2]
              }
            },
            title: {
              text: 'Impressions',
              style: {
                color: Highcharts.getOptions().colors[2]
              }
            },
            tickPositioner: positioner.apply(this, [tickAmount, firstAxisMax]),
          }, { // Secondary yAxis
            gridLineWidth: 0,
            tickPositioner: positioner.apply(this, [tickAmount, secondAxisMax]),
            title: {
              text: 'eCPM',
              style: {
                color: Highcharts.getOptions().colors[0]
              }
            },
            labels: {
              format: '{value} $',
              style: {
                color: Highcharts.getOptions().colors[0]
              }
            },
            opposite: true

          }],