如何在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; 
     }