如何在HighCharts barcharts中繪製SVG線？

Question

我有一個分組條形圖，就像http://www.highcharts.com/demo/column-basic一樣。我想繪製每組水平線的平均值（例如，1月，2月等歷史世界的平均降雨量）有沒有簡單的方法來做到這一點？當然，每個組都會有不同的水平線 - 但我無法弄清楚是否有辦法處理單個線條並執行SVG線或任何其他方式。非常感謝任何指針。

Answer 1

您可以使用循環計算每組中的平均值，然後轉換位置。顯然你應該也需要關於刻度寬度的信息。

http://jsfiddle.net/rfwd9/2/

var i = 0, 
      avg, 
      yAxis = chart.yAxis[0], 
      r = chart.renderer, 
      tickWidth = chart.plotWidth/chart.series[0].data.length, 
      startX = chart.plotLeft, 
      len = chart.series[0].data.length, 
      seriesCount = chart.series.length; 


     for (i = 0; i < len; i++) { 
      avg = 0; 
      $.each(chart.series, function (j, serie) { 
       avg += serie.data[i].y; 
      }); 
      avg = Math.floor(avg/seriesCount); 

      r.path(['M', startX, chart.plotHeight - yAxis.translate(avg), 'L', startX + tickWidth, chart.plotHeight - yAxis.translate(avg)]) 
       .attr({ 
       'stroke-width': 2, 
       stroke: 'red' 
      }) 
       .add(); 
      startX = startX + tickWidth; 
     }