Highcharts 注释 - 如何通过轴点绘制矩形？

Question

我需要在 HighCharts 中绘制矩形和其他形状

打算使用内置注释模块，但无法通过 xAxis 和 yAxis 点创建简单的矩形

例如 - 这是我要创建的形状

  annotations: [{
    shapes: [{
      type: 'rect',
      points: [
        {
          xAxis: 1,
          yAxis: 20
        }, {
          xAxis: 10,
          yAxis: 20
        }
      ]
    }]
  }]

例如我想从 1:20 对角线拉伸到 10:20

根据文档，这种方式可能有效，但事实并非如此。

有什么方法可以做我想做的事吗？

Answer 1

您的 shape 对象没有以正确的方式定义，因为 xAxis 和 yAxis 参数用于指定哪个轴点将连接到。您的实施不起作用的第二个原因是您没有指定形状的任何 height 和 width 值。

如果您想在两点之间绘制一个矩形（如果我清楚地理解您的期望），请使用 Highcharts.SVGRenderer.rect() 函数来生成它。您可以简单地计算出您需要通过 Axis.toPixels() 值创建的 rect 的 x 和 y 值，这会将轴值转换为绘图像素值。

另一个，我认为最好的解决方案是创建新的 fake 系列，它只有您的注释点（用户无法访问），然后创建一个形状 pathtype，该系列中的所有点都连接到它。这是代码和示例：

  series: [{
    data: [{
      y: 29.9,
      id: 'min'
    }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
      y: 216.4,
      id: 'max'
    }, 194.1, 95.6, 54.4]
  }, {
    name: 'Fake annotations points',
    // To make this series hidden and unaccessible for user.
    type: 'scatter',
    marker: {
        enabled: false
    },
    showInLegend: false,
    //
    data: [{
        x: 0,
      y: 29.9,
      id: '1'
    }, {
        x: 0,
      y: 216.4,
      id: '2'
    }, {
        x: 8,
      y: 216.4,
      id: '3'
    }, {
        x: 8,
      y: 29.9,
      id: '4'
    }]
  }],

  annotations: [{
    shapes: [{
      type: 'path',
      points: ['1', '2', '3', '4'],
    }]
  }]
});

实例：http://jsfiddle.net/quag6ey2/

Highcharts 注释 - 如何通过轴点绘制矩形？

Highcharts annotations - how to draw rectangle by axis points?

highcharts

highstock