javascript - 如何在 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();

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

---

现场演示: 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