highcharts數據標籤重疊plotlines值

我有一個圖表與列和行。我使用繪圖線爲曲線圖添加了平均線。highcharts數據標籤重疊plotlines值

我的問題是該行的數據標籤與圖形文本重疊。我在這裏再現了錯誤（請參閱最後一個數據標籤）。：http://jsfiddle.net/cs8bqumy/

我可以在最後一列之後添加一些填充來糾正這個問題嗎？

$(function() { 
      $('#container').highcharts({ 
       chart: { 
        zoomType: 'xy', 
        height: 400 
       }, 
       title: { 
        text: null 
       }, 
       xAxis: [{ // Suppier names xAxis 
        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: '%' } 
       } 
       ] 
      }); 
     });

來源

2014-10-29 jagdipa

您還可以設置max值即作爲9.3。

http://jsfiddle.net/cs8bqumy/2/

來源

2014-10-30 13:31:18

這正是我一直在尋找。我唯一的問題是我剛剛花了半天的時間來編寫捕獲最後x值的代碼，並且如果它靠近劇情線，它會重新定位值。 – jagdipa 2014-10-30 13:48:48

Highcharts允許您修改數據數組中各個數據標籤的位置。在你的榜樣，你會做的是像這樣：

data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,{y:11.90, dataLabels: {y:-8}}],

這是在API中：http://api.highcharts.com/highcharts#series.data.dataLabels

雖然這可能是最好的移動你的plotline標籤的下面那條線。在你的例子中，將y：20添加到plotLines [0] [label]。

在API：http://api.highcharts.com/highcharts#xAxis.plotLines.label.x

來源

2014-10-29 18:35:54

正如亞當的答案，你可以去和現在的位置是最後一個點的datalabel提及。

而不是數據標籤我建議您定位plotLine的標籤。

您可以使用，y位置屬性x和對準它向左

label: { 
    x: -50, 
    y: 10 
}

這將是最好的解決辦法，如果你的情節線將不會與Y軸網格線重疊控制它。

這裏更新fiddle

來源

2014-10-30 06:23:07 Strikers

highcharts數據標籤重疊plotlines值

回答

相關問題