Highcharts - 剧情标签后面的隐藏剧情线

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

我想要的标签和情节线看起来像这样：

人有什么想法？

下面是我使用证明我的问题的示例代码。

$(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 
    }] 
}); 
});

来源

2016-12-02 ErwanLent

我不知道我理解的问题，但'色：“transparent''？ –

http://jsfiddle.net/qajb5vmo/1/？ –

@pritishvaidya我更新了我想要的图片的帖子 – ErwanLent

您可以启用标签绘制成HTML。它会导致它们会被渲染到svg元素之上。

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

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

来源

2016-12-04 16:46:42 morganfree

设置配置中的背景颜色完美无缺！谢谢！ – ErwanLent

可以通过设置x和y轴如图中fiddle

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

来源

2016-12-02 19:31:00

yah我试过这个解决方案，但是它对我来说不起作用。我可以增加highcharts容器的大小，但是id必须重做很多css。理想情况下，这是一种解决方案，可以让我将标签的背景颜色设置为白色，或者减少线条的长度。 – ErwanLent

没有必要添加大量的CSS，您可以通过'plotAreaWidth'和'plotAreaHeight'调整区域*宽度*和*高度* –

这是事实，在大多数情况下都可以工作。我使用的vuejs highcharts插件不显示图表的标题，因此图表上方的任何内容都会隐藏起来。我不知道为什么，必须是插件的错误。 – ErwanLent

这是为了减少绘图行的行高度一个黑客改变标签的位置。我不推荐使用这种方法，因为这是一种黑客攻击。

http://jsfiddle.net/qod5hzb2/

const pathSvgArray = $('.highcharts-plot-lines-0 path').attr('d').split(''); 
    pathSvgArray[2] = '75'; 

    $('.highcharts-plot-lines-0 path').attr('d', pathSvgArray.join(' '));

来源

2016-12-02 20:25:47 ErwanLent

这也必须在调整大小事件上完成。不是理想的解决方案。 – ErwanLent

Highcharts - 剧情标签后面的隐藏剧情线

回答

相关问题