某些數據標籤沒有顯示在堆積列中Highchart

Question

我使用Highcharts構建了一個堆疊柱形圖，但dataLabels存在問題。某些數據標籤無法顯示。

我創建了一個的jsfiddle：http://jsfiddle.net/samsularifin/7gf787vL/1/

這是我的Javascript代碼：

$(function() { 
$('#ctrend').highcharts({ 
    chart: { 
     type:'column', 
     margin: 75, 
     options3d: { 
      enabled: false, 
      alpha: 10, 
      beta: 25, 
      depth: 70 
     } 
    }, 
    title: { 
     text: 'Month to Month Rev', 
     style: { 
       fontSize: '18px', 
       fontFamily: 'Verdana, sans-serif' 
     } 
    }, 
    subtitle: { 
     text: 'LEVEL', 
     style: { 
       fontSize: '18px', 
       fontFamily: 'Verdana, sans-serif' 
     } 
    }, 
    plotOptions: { 
     column: { 
      depth: 25 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul'] 
    }, 
    yAxis: { 
     title: { 
      text: '(In Bio)' 
     }, 
     stackLabels: { 
      useHTML: true, 
      x: 0, 
      y:-28,    
      style: { 
       fontSize: '10px', 
       fontFamily: 'Verdana, sans-serif', 
       color:'#722c84', 
       //textShadow: "1px 1px #000" 
      }, 
      enabled: true, 
      formatter: function() { 
       return Highcharts.numberFormat(this.total, 0); 
      }, 
     } 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'normal', 
      pointPadding: 0.1, 
      dataLabels: { 
       enabled: true, 
       //crop: false, 
       //overflow: 'none', 
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 

      } 
     }, 
     series: { 
      dataLabels: { 
       crop: false 
      } 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name; 
     } 
     }, 
    series: [{ 
     name: 'Voice', 
     data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07], 
     index:3, 
     shadow : true, 
     dataLabels: { 
      enabled: true, 
      color: '#fff', 
      align: 'center', 
      formatter: function() { 
       return Highcharts.numberFormat(this.y, 2); 
      }, // one decimal 
      y: 0, // 10 pixels down from the top 
      style: { 
       fontSize: '9px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 

    }, 
    { 
     name: 'SMS', 
     data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23], 
     index:2, 
     shadow : true, 
     dataLabels: { 
      enabled: true, 
      color: '#fff', 
      align: 'center', 
      formatter: function() { 
       return Highcharts.numberFormat(this.y, 2); 
      }, // one decimal 
      y: 0, // 10 pixels down from the top 
      style: { 
       fontSize: '9px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 

    }, { 
     name: 'Other', 
     data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70], 
     index:0, 
     shadow : true, 
     dataLabels: { 
      enabled: true, 
      color: '#fff', 
      align: 'center', 
      formatter: function() { 
       return Highcharts.numberFormat(this.y, 2); 
      }, // one decimal 
      y: 0, // 10 pixels down from the top 
      style: { 
       fontSize: '9px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 

    }, { 
     name: 'Data', 
     data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27], 
     index:1, 
     shadow : true, 
     dataLabels: { 
      enabled: true, 
      crop: false, 
      color: '#fff', 
      align: 'center', 
      formatter: function() { 
       return Highcharts.numberFormat(this.y, 2); 
      }, // one decimal 
      y: 0, // 10 pixels down from the top 
      style: { 
       fontSize: '9px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 

    }] 
}); 
}); 

需要幫助！

Answer 1

Highcharts認爲這些數據標籤太靠近，無法全部顯示。

您可以通過允許重疊解決這個問題，使用此代碼（JSFiddle）：

plotOptions: { 
    series: { 
     dataLabels: { 
      allowOverlap: true 
      // ... 
     } 
    } 
} 

或者使其不太可能通過減少填充（JSFiddle）發生：

plotOptions: { 
    series: { 
     dataLabels: { 
      padding: 0 
      // ... 
     } 
    } 
}