svg - 如何在 HighCharts 条形图中绘制 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;
        }