Highcharts：散点图中X轴和Y轴交叉于零点

Question

Highcharts：散点图中X轴和Y轴交叉于零点

highcharts

6

在highcharts中，我想绘制一个散点/气泡图，其中x值范围从-50到+50，y值从-100到+100。有没有办法使x和y轴被绘制，以便它们在图表中心交叉于零？

我尝试使用轴中的“偏移”参数，它确实移动了轴，例如http://bit.ly/Xd9Z51，但这种方法存在以下问题：

您无法动态设置偏移参数，因此如果系列更新并更改最小/最大x/y值，则轴不再在零处交叉。
如果进行缩放，则轴不再在零处交叉。
很难计算像素的偏移量，考虑到div大小、边距、标题等。
调整包含div大小会导致所需的轴偏移位置发生变化。

- SteveP

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paweł Fus · Accepted Answer

Highcharts v7.2+的解决方案

设定某些选项以防止图表为轴保留空间，然后使用插件：

(function(H) {
  H.addEvent(
    H.Axis,
    'init',
    function(e) {
      if (H.defined(e.userOptions.matchAxis)) {
        H.merge(
          true,
          e.userOptions, {
            labels: {
              reserveSpace: false
            },
            title: {
              reserveSpace: false
            },
            offset: -1,
            opposite: this.isXAxis ? true : false
          }
        );
      }
    }
  );

  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',
          newTranslation = {},
          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);

          newTranslation[translate] = newOffset + offset + crisp;

          if (axis.axisGroup) {
            axis.axisGroup.animate(newTranslation);
          }
          if (axis.labelGroup) {
            axis.labelGroup.animate(newTranslation);
          }
        }
      });
    }
  );
})(Highcharts);

Demo: https://jsfiddle.net/BlackLabel/2k0bw6q3/

插件API:

x/yAxis.matchAxis.value - 设置应从相反的轴中选择的值。默认为0。
x/yAxis.matchAxis.index - 在使用多个轴时，设置应该用于计算的相反轴的索引。默认为0。

例如设置 yAxis.matchAxis = {} 是完全可以的：https://jsfiddle.net/BlackLabel/qwyczoxb/（因为有默认值）

在插件中强制执行的选项列表：

x/yAxis.labels.reserveSpace 为false
x/yAxis.title.reserveSpace 为false
x/yAxis.offset 为负数（例如-50）
xAxis.opposite 设置为true
yAxis.opposite 设置为false

注意：仅与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/