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 - 劇情標籤後面的隱藏劇情線

回答

相關問題