css - 将我的标签放在图表前面而不遮挡点

Question

我正在使用 plotbands 来标记图表上的区域，但由于我不希望它们被着色，所以我将它们的透明度设置为 0。但是，我似乎有两个选择:将它们在所有内容的前面，在这种情况下，我无法将鼠标悬停在点上以显示工具提示，或者在所有内容的后面，在这种情况下，文本会因面积图的着色而变红。我将工具提示 zIndex 设置得非常高，但没有结果。

xAxis: {
            type: 'datetime',
            plotBands: [{
            {
                color: 'rgba(255, 255, 255, 0)',
                from: new Date(2001, 1, 3).getTime(),
                to: new Date(2009, 1, 21).getTime(),
                zIndex: 2,
                label: {
                    text: "Low zIndex, label is reddish",
                    verticalAlign: 'bottom',
                    y: bandLabelVertOffset,
                    style: {
                        fontSize: bandLabelFontSize,
                        lineHeight: bandLabelLineSpacing,
                        color: 'black',
                        fontWeight: 'bold',
                    }
                }
            },
            {
                color: 'rgba(255, 255, 255, 0)',
                from: new Date(2009, 1, 21).getTime(),
                to: new Date(2013, 0, 0).getTime(),
                zIndex: 20,
                label: {
                    text: "High zIndex, can't click points",
                    verticalAlign: 'bottom',
                    y: bandLabelVertOffset,
                    style: {
                        fontSize: bandLabelFontSize,
                        lineHeight: bandLabelLineSpacing,
                        color: 'black',
                        fontWeight: 'bold',
                    }
                }
            }],

    tooltip: {
        enabled: true,
        useHTML: true,
        zIndex: 4000,
    },

Answer 1

您可以通过 Renderer 添加文本或 labels