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/

Answer 2

正如亚当的回答所提到的，你可以去找出最后一点的数据标签。

而不是数据标签我建议你定位plotLine的标签。

您可以使用x，y位置属性控制它并将其对齐到左侧

label: {
    x: -50,
    y: 10
}

如果您的绘图线永远不会与yAxis网格线重叠，这将是最佳解决方案。

此处已更新fiddle

Answer 3

Highcharts允许您修改数据数组中各个数据标签的位置。在你的例子中，你会这样做：

data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,{y:11.90, dataLabels: {y:-8}}],

这是API：http://api.highcharts.com/highcharts#series.data.dataLabels

虽然最好将情节线标签移到线下。在您的示例中，将y：20添加到plotLines [0] [label]。

在API中：http://api.highcharts.com/highcharts#xAxis.plotLines.label.x

highcharts数据标签与plotlines值重叠

3 个答案: