Question

http://jsfiddle.net/ramon_ackermann/PhjX7/2/

$(function () {
$('#container').highcharts({

    chart: {
        type:'column'
    },
    xAxis: {
        min:0,
        max:0,
        categories: ["test"]
    },
    series: [{
        "name": "ABELO",
        "data": [
            0.73
        ]
    },{
        "name": "UAAU",
        "data": [
            0.77
        ]
    },{
        "name": "ANCB",
        "data": [
            1.72
        ]
    },
             {
        "name": "avg",
        "type": "line",
        "color": "#ff0000",
        "data": [
            {
                "x": -0.5,
                "y": 1.5
            },{
                "y": 1.5,
                "dataLabels": {
                    "enabled": true,
                    "align": "right",
                    "verticalAlign": "bottom",
                    "formatter": function(){
                        return 'avg:  ' + this.y;
                    },
                    "style": {
                        "fontWeight": "normal"
                    },
                    "x": 0.5
                }
            }
        ]
    }
]

});

}）;

在升级到Highcharts 3之前，上面的代码可以正常工作，从左到右绘制线条，但由于我正在尝试升级到v3，我无法将线条一直画到右边。

我从之前的问题/答案（highcharts line not fully plotted）

中设计了上述解决方案

以上示例是我需要的简化版本，遗憾的是plotLines不适合我。

Answer 1

简单的解决方案是将另一个点扩展到avg行：

...,{"x": 1.5, "y": 1.5}]

为什么plotLine不合适？

Answer 2

我建议使用plotLine或使用渲染器。

http://api.highcharts.com/highcharts#yAxis.plotLines

http://api.highcharts.com/highcharts#Renderer.path

高图3，柱形图上的线

2 个答案: