Highchart列圖表重疊yAxis.plotLines標籤

存在重疊的問題，當我試圖繪製柱形圖上的兩個yAxis.plotLines。 plotLines的標籤已被覆蓋/按列重疊。Highchart列圖表重疊yAxis.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

感謝

來源

2017-09-27 Qing Xu

簡單地改變'zIndex'（http://api.highcharts.com/highcharts/yAxis.plotLines .zIndex）屬性設置爲兩個繪圖行中的較高值。例如：http://jsfiddle.net/8okmgwtu/。 –

您需要添加zIndex像你這樣的第一線繪製線 - Fiddle

來源

2017-09-27 04:16:28 Core972

看起來你是在使用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 } }

來源

2017-09-27 02:09:33 Naltroc

Hi @Naltroc，感謝您的回覆。我想你誤解了我的問題。我用紅框突出我的問題，這不是高層建築的一部分。 –

我的問題是，plotlines的標籤已被列覆蓋。我需要把它帶到前面。 –

Highchart列圖表重疊yAxis.plotLines標籤

回答

相關問題