highcharts 数据标签与 plotlines 值重叠

Question

我有一个包含列和线的图表。我使用绘图线为折线图添加了一条平均线。

我的问题是线条的数据标签与绘图文本重叠。我在这里重现了这个错误(见最后的数据标签)。 : http://jsfiddle.net/cs8bqumy/

我可以在最后一列之后添加一些填充来纠正这个问题吗？

$(function () {
            $('#container').highcharts({
                chart: {
                    zoomType: 'xy',
                    height: 400
                },
                title: {
                    text: null
                },
                xAxis: [{ // Suppier names xAxis
                    categories: ['A','B','C','D','E','F','G','H','I','J'],
                    labels: { rotation: -90 }
                }],
                yAxis: [{ // Primary yAxis (Sales)
                    title: {
                        text: '<span class="axis-label">Sales Value (AED)</span>',
                        useHTML: true,
                        style: {
                            color: '#89A54E'
                        }
                    },
                    min: 0,
                    max: 190234
                }
                , { // Secondary yAxis (Margin %)
                    title: {
                        text: '<span class="axis-label">Margin</span>',
                        useHTML: true
                    },
                    labels: {
                        format: '{value}%'
                    },
                    opposite: true,
                    min: 0,
                    max: 22,
                    alignTicks: false,
                    gridLineWidth: 0,
                    plotLines : [{
                        value : 11.66000,
                        color : 'red',
                        dashStyle : 'shortdash',
                        width : 2,
                        label : {
                            text : '11.66%',
                            align: 'right',
                            style: {
                                color: 'red'
                            }
                        }
                    }]
                }
                ],
                tooltip: {
                    shared: true
                },
                legend: {
                    enabled: false
                },
                credits: { enabled: false },
                plotOptions: {
                    series: { pointWidth: 25 },
                    column: { colorByPoint: true },
                    line: {
                        dataLabels: {
                            enabled: true,
                            format: '{y}%',
                            style: {
                                fontWeight: 'bold',
                                color: '#000000',  
                            }
                            //style: 'background-color:rgba(255,0,0,0.5);'
                            //backgroundColor: '#FEFEFE',
                            //shadow: true
                        }
                    }
                },
                series: [{
                    name: 'Sales Value',
                    color: '#FFA500',
                    type: 'column',
                    data: [104833.6400,38023.0500,53165.2200,21674.0000,37098.4700,42679.6700,23127.3300,34588.5000,33380.0000,15453.0000],
                    tooltip: {
                        valuePrefix: 'AED'
                    }
                }
                , {
                    name: 'Margin After Discount (%)',
                    color: 'lightblue',
                    yAxis: 1,
                    data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,11.90],
                    tooltip: { valueSuffix: '%' }
                }
                ]
            });
        });

Answer 1

您还可以设置max 值即9.3。

http://jsfiddle.net/cs8bqumy/2/