在线图上绘制矩形

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-on-chart/

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/