Question

当我尝试在柱形图上绘制两个yAxis.plotLines时，存在重叠问题。 plotLines的标签已被列覆盖/重叠。

请参见下面的屏幕截图

$(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy',
        height: 400
    },
    title: {
        text: null
    },
    xAxis: [{ // Suppier names xAxis
        max: 9.3,
        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: '%'
        }
    }]
});

}）;

所以，我的问题是，在这种情况下，有没有办法允许重叠？但是，我不想更改xAxis的最大值。这是我的测试链接：testing link

由于

Answer 1

看起来你在Javscript中使用CSS属性。我不熟悉您正在使用的包装，但通常会出现不透明的情况。可以定义元素可见性的属性。

例如，将红色文本框的不透明度设置为0.这将使其不可见。

如果要查看，请将不透明度设置为1.

顶部的条形图自动设置为1，因为默认情况下每个元素的不透明度为1。

plotLines: [{ value: 11.66000, color: 'red', dashStyle: 'shortdash', width: 2, label: { text: '11.66%', align: 'right', style: { color: 'red', opacity: 0 } }

Answer 2

您需要像第一行一样添加zIndex到情节线 - Fiddle

Highchart专栏图表重叠yAxis.plotLines标签

2 个答案: