javascript - Highcharts 刻度位置未在多个 Y 轴上对齐

Question

我在同一页面上有多个图表，目标是所有图表上的每个指标都具有相同的最大值，以便更轻松地比较图表 ( https://www.screencast.com/t/vtF6h5ZRWS )

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

现在我尝试使用刻度位置(我在后端计算)并将其传递到图表。但这里存在相对轴上刻度对齐的问题，如图 https://www.screencast.com/t/iwnGOhJFb 所示。

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

        yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Impressions',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        tickPositions: [0, 5500000, 11000000, 15000000]

    }

http://jsfiddle.net/j82oen9c/8/

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

Answer 1

为了对齐两个轴上的刻度，您可以使用两种不同的方法。 第一个是定义您自己的 Axis.tickPositioner 函数，该函数返回根据您的需要调整的计算出的刻度数组。

继续，您需要在两个轴上获得相同数量的刻度，并且它们应该位于轴上的相同位置，因此定位器函数应该接收两个参数 - 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.tickPositioner，并定义两个轴的刻度数和最大值:

 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

          }],

实例:http://jsfiddle.net/vL324nqx/

解决该问题的第二种方法是在两个轴上使用 Axis.tickPixelInterval 属性，但没有根据您的需求进行太多调整。不用解释得更详细，因为API里已经有明确的信息了。

实例:http://jsfiddle.net/mqget4hb/

API引用:

https://api.highcharts.com/highcharts/yAxis.tickPositioner

https://api.highcharts.com/highcharts/yAxis.tickPixelInterval