Javascript 在直线图上绘制矩形

我有一个简单的折线图

我想让用户在图形顶部绘制矩形，捕捉到网格线。请参见此处以获取可视示例：

我已经看过Highcharts和d3，但它们都没有一个允许用户在图形上“绘制”的工具

---

在潜入API和/或用大量代码重新发明轮子之前，我希望有人以前已经实现了这一点（或类似的东西），或者可以为我指出正确的方向？

从我使用Highcharts的经验来看，你完全可以在图表之上绘制。这只是一个你想怎么做的问题

我可以想出两种方法来实现这一目标：

在图表上画几个“虚拟”线系列，这将产生你想要的效果。这样做的好处是，线条将与图表网格保持固定，在调整浏览器窗口或视口的大小时，线条将与图表的其余部分一起保持响应，并以各种格式清晰地导出。有几个参数可用于将“虚拟”系列保留在图例之外（

showInLegend:false

），并防止用户与它们交互（

enableMouseTracking:false

）

使用

renderer.rect

方法在图表中绘制矩形（请参阅）。以下是Highcharts API文档中的一个基本示例：

API文档中充满了示例。我希望这对你的探索有所帮助

---

您可以将columnRange系列与line结合使用

plotOptions: {
  columnrange: {
            pointPadding: 0,
    groupPadding: 0,
    borderWidth: 1,
    borderColor: 'black'
  }
},

legend: {
  enabled: false
},

series: [{
  type: 'line',
  data: [
    [12, -20],
    [2, -10]
  ]
}, {
    color: 'rgba(0,0,0,0)',
  name: 'Temperatures',
  data: [
    [-9.7, 9.4],
    [-8.7, 6.5],
    [-3.5, 9.4],
    [-1.4, 19.9],
    [0.0, 22.6],
    [2.9, 29.5],
    [9.2, 30.7],
    [7.3, 26.5],
    [4.4, 18.0],
    [-3.1, 11.4],
    [-5.2, 10.4],
    [-13.5, 9.8]
  ]
}]

例如：

---

您需要一个折线图：，画一些矩形：使用这些矩形，只需将它们附加到您附加线条/路径的容器中即可。确保将点传递到图形比例，然后开始。直线图上的矩形。我相信在d3中这样做会很好。你可以创建一个透明的

对象的网格，并给每个对象一个

鼠标向下

事件来改变其填充颜色。你的帖子对我的任务非常有帮助，谢谢。最终，它让我发现了Highcharts的插件，我根据自己的喜好对它进行了分叉和修改。啊，矩形的列范围也是一个很好的主意！谢谢你，@SebastianBochan。