Question

下面在JSFiddle中演示了这个问题。我希望文本背后的行不显示。我想将标签的背景颜色设置为白色，并将图线隐藏在标签后面。

我希望标签和情节线看起来像这样：

有人有什么想法吗？

这是我用来演示我的问题的示例代码。

$(function () {
Highcharts.chart('container', {
    xAxis: {
        tickInterval: 24 * 3600 * 1000, // one day
        type: 'datetime',
        plotLines: [{
            color: 'red',
            width: 2,
            value: Date.UTC(2010, 0, 6),           
            label: {
                text: 'Plot line',
                textAlign: 'center',
                rotation: 0
            }
        }]
    },

    yAxis: {
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }]
});
});

Answer 1

您可以设置x和y轴来更改标签的位置，如fiddle

所示

label: {
                    text: 'Plot line',
                    textAlign: 'center',
                    rotation: 0,
                    y:-10
                }

Answer 2

您可以将标签设置为html。这将导致它们将被渲染到svg元素之上。

label: {
                y: 20,
                useHTML: true,
                text: 'Plot line',
                textAlign: 'center',
                rotation: 0,
                style: {
                  backgroundColor: 'white'
                }
            }

示例：http://jsfiddle.net/qajb5vmo/5/

Highcharts - 隐藏情节标签背后的情节线

2 个答案: