在折线图上绘制矩形

Question

我有一个简单的折线图。

我想让用户在图的顶部绘制与网格线对齐的矩形。 请参见此处的直观示例：

我看过Highcharts和d3，但都没有一种工具可以让用户在图形上方进行“绘制”。

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

Answer 1

从我在Highcharts的经验来看，您绝对可以在图表之上绘制。 这只是您要如何处理的问题。

我可以想到两种实现该目标的方法：

1. 在图表上绘制几个“虚拟”线系列，以创建您想要的效果。 这样做的好处是，这些行将与图表网格保持固定，在调整浏览器窗口或视口的大小时，它们将与图表的其余部分保持响应，并以各种格式清晰地导出。 您可以使用一些参数来使“虚拟”系列脱离图例（ showInLegend: false ），并防止它们与用户进行交互（ enableMouseTracking: false ）。
2. 使用renderer.rect方法在图表中绘制矩形（请参阅http://api.highcharts.com/highcharts#Renderer.rect ）。 这是摘自Highcharts API文档的基本示例： http : //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect图表/

API文档中包含许多示例。 我希望这对您的追求有所帮助。

Answer 2

您可以将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]
  ]
}]

例：

• http://jsfiddle.net/8vu224mc/