Highcharts：X和Y轴在散点图中的零交叉处

Question

在高图中，我想绘制一个散点图/气泡图，其中x值的范围是-50至+ 50，y值的范围是-100至+100。有没有一种方法可以绘制x和y轴，使它们在图表中心零交叉？

我尝试在轴上使用'offset'参数，该参数的确会移动轴，例如http://bit.ly/Xd9Z51，但是这种方法存在以下问题：

1. 您无法动态设置offset参数，因此，如果一个系列更新并更改了最小/最大x / y值，则轴不再以零交叉。
2. 如果缩放，则轴不再以零交叉。
3. [考虑到div大小，边距，标题等，要计算像素偏移非常困难。
4. 调整包含的div的大小会导致所需的轴偏移位置发生更改。

Answer 1

Highcharts v7.2 +的解决方案

设置一些选项（请参见下面的列表）以防止图表保留空间，然后使用插件：

(function(H) {
  H.addEvent(
    H.Chart,
    'render',
    function() {
      let chart = this;

      chart.axes.forEach(function(axis) {

        let newOffset,
          matchAxis = axis.options.matchAxis,
          translate = axis.horiz ? 'translateY' : 'translateX',
          offset = axis.options.offset || 0,
          crisp = axis.options.lineWidth % 2,
          otherAxes = axis.isXAxis ? chart.yAxis : chart.xAxis;

        if (H.defined(matchAxis)) {
          newOffset = otherAxes[matchAxis.index || 0].toPixels(matchAxis.value || 0, true);

          if (axis.axisGroup) {
            axis.axisGroup.attr(translate, newOffset + offset + crisp);
          }
          if (axis.labelGroup) {
            axis.labelGroup.attr(translate, newOffset + offset + crisp);
          }
        }
      });
    }
  );
})(Highcharts);

演示：https://jsfiddle.net/BlackLabel/qdkox9t6/

插件的API：

• x/yAxis.matchAxis.value-设置值，应从相反的轴上拾取。默认为0。
• x/yAxis.matchAxis.index-使用多轴时，设置索引，该相反轴用于计算。默认为0。

例如yAxis.matchAxis = {}完全可以：https://jsfiddle.net/BlackLabel/2me13j9d/

要设置的选项列表：

• x/yAxis.labels.reserveSpace为假
• x/yAxis.title.reserveSpace为假
• [x/yAxis.offset为负值（例如-50）

注意：仅通过v7.2.0

测试

旧解决方案（v3 +）

目前，唯一的解决方案是使用offset参数。但是，从Highcharts 3.0开始，您可以自由控制该属性并更新轴：

chart.yAxis[index].update( options );

其中options是一个带有yAxis选项（包括偏移量）的对象。要获取像素位置，您可以使用内部函数chart.xAxis[index].translate(value)（有点小巧，但是可以）。因此，当两者结合时，请参见示例：http://jsfiddle.net/UGpPV/6/