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函数，该函数返回根据您的需求调整后的计算的tickcs数组。

继续，您需要在两个轴上获得相同数量的刻度，并且它们应位于轴上相同的位置上，因此定位器功能应接收两个参数-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

高图刻度线位置未在多个Y轴上对齐

1 个答案: