javascript - 如何在 Highchart 图表上绘制椭圆(椭圆)

标签 javascript highcharts ellipse rect oval

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

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]
        ]
      }
    ],
})

如何以编程方式在交叉点绘制椭圆并进行缩放?

最佳答案

您可以使用 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 引用:

关于javascript - 如何在 Highchart 图表上绘制椭圆(椭圆),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47173094/

相关文章:

python - 围绕点绘制椭圆

math - 找到椭圆的所有 4 个可能的法线

javascript - Google map Asp.net 具有不同的自动搜索框和不同的标记

javascript - Jquery - 数据表拖放更改背景后删除新名称

performance - Highstock 与 Google 图表的性能对比

javascript - 当值为 0 时,向具有堆叠条形的 Highcharts 条形图添加圆 Angular

用于导出服务器的 Highcharts 数据标签格式化程序

c++ - 为什么我的 openGL 椭圆是尖的?

javascript - 使用从 PHP 生成的 HTML 调用的函数 AJAX 更新 MYSQL 数据库

javascript - 替换数据 block 中的多个模式