对齐高图的xAxis [英] Aligning the xAxis of highcharts

问题描述

https://jsfiddle.net/hjzeo6u2/

在上面的链接中，我重现了一个问题，我想将X轴标签对准相应系列图的正下方.到目前为止，两个X轴标签都位于这两个系列的完整图的底部，这是意外的.

In the above Link I have reproduced an issue where I wanted to align the X-Axis labels just below the respective series plots. As of now both the X-Axes labels are at the bottom of the complete plot of both the series which is not expected.

我已经尝试从highcharts api参考中使用xAxis的align属性

I have tried with the align property of xAxis in from highcharts api reference https://api.highcharts.com/highcharts/xAxis.labels.align but could not find the expected solution.

预期结果应该是每个X轴都必须在其对应图的正下方.就像一个序列图，然后是它的X轴，之后是另一个序列图，然后是它的X轴.同样，当我在绘图之间使用分隔符调整Y轴的大小时，X轴也应相应地重新定位自己.

The expected result should be that each X-Axis has to be just below its corresponding plot. Just like a series plot and then its X-Axis after that another series plot and then its X-Axis. Also as and when I resize the Y-Axis using the separator in between the plots,the X-Axis also should reposition itself accordingly.

推荐答案

您要实现这样的目标吗? 演示

Would you like to achieve something like this? Demo

chart: {
  events: {
    render() {
      let chart = this,
        xAxis = chart.xAxis,
        controlLine = chart.yAxis[0].resizer.controlLine;

      xAxis[1].axisGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
      xAxis[1].labelGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
    }
  }
},

这篇关于对齐高图的xAxis的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！