如何在HighCharts条形图中绘制SVG线?

时间:2013-02-01 17:34:07

标签: svg highcharts renderer

我有一个分组的条形图,就像http://www.highcharts.com/demo/column-basic一样。我想绘制每组平均水平线(例如,1月,2月的历史世界平均降雨等?)有没有简单的方法呢?当然,每个组都有不同的水平线 - 但我无法弄清楚是否有办法处理单个条和SVG线或任何其他方式。非常感谢任何指针。

1 个答案:

答案 0 :(得分:3)

您可以使用循环计算每组中的平均值,然后平移位置。显然,您还需要有关刻度线宽度的信息。

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