在折線圖上繪制矩形

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/