如何在 Highchart 图表上绘制椭圆形（椭圆形）

Question

我有两个系列及其交点。我想在图表上有一个椭圆形，中心位于交叉点。椭圆半径应根据轴单位设置，以显示每个轴的感兴趣区域。

Highcharts.chart('container', {
    series: [
      // first series
      {
        name: 'IPR',
        data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]]
      }, 
      // second series
      {
        name: 'VLP', 
        data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]]
      }, 
      // intersection
      {
        name: 'Operating point',
        data: [
          [22.42, 23.35]
        ]
      }
    ],
})

如何以编程方式在相交处绘制椭圆形并进行缩放？

Answer 1

您可以用来Renderer.createElement在 Highcharts 中创建其他 SVG 元素：

    this.renderer.createElement('ellipse').attr({
      cx: 60,
      cy: 60,
      rx: 50,
      ry: 25,
      'stroke-width': 2,
      stroke: 'red',
      fill: 'yellow',
      zIndex: 3
    }).add();

要转换为轴单位，请toPixels按照 @Anton Rybalko 建议使用。

现场演示： http: //jsfiddle.net/kkulig/ds6aj5yp/

API参考：

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
• https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels