6

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

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

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

1 回答 1

4

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);

演示：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假的
  • x/yAxis.title.reserveSpace假的
  • x/yAxis.offset为负值（例如 -50）
  • xAxis.opposite设置为真
  • yAxis.opposite设置为假

注意：仅使用v7.2.0测试

旧解决方案 (v3+)

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

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

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

于 2013-03-01T12:29:27.403 回答