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;
        }