總價值數字通常與Highcharts條形圖中的條形重疊

我有一個條形圖，通常總價值與其重疊，如下所示。我試圖減少圖形，寬度和高度的面積，這個問題得到解決，但對於一些其他值再次出現，是否有任何永久的解決方案，以避免重疊？總價值數字通常與Highcharts條形圖中的條形重疊

請在下面找到

$('#' + divid).highcharts({ 
         chart: { 
          type: chart_type == 'bar_simple' || chart_type == 'bar' ? 'bar' : 'column', 
          margin: 75, 
          marginBottom: $('.hidSelectedOA').val() == '0' ? '110' : '60', 
          marginLeft: marginLeftOfGraph, 
          marginTop: marginTopOfGraph 
         }, 
         title: { 
          text: graphName 
         }, 
         xAxis: { 
          categories: category_name, 
          labels: { 
           formatter: function() { 
            var text = this.value, 
             formatted = text.length > 20 ? text.substring(0, 20) + '...' : text; 

            return '<div>' + formatted + '</div>'; 
           }, 
           style: { 
            width: '150px' 
           }, 
           useHTML: true 
          } 

         }, 
         yAxis: { 

          title: { 
           text: '', 
          }, 

          stackLabels: { 
           enabled: true, 
           style: { 
            fontWeight: 'bold', 
            color: 'gray' 
           }, 

          } 
         }, 
         legend: { 
          verticalAlign: 'bottom', 
          itemStyle: { 
           font: '12px Trebuchet MS, Verdana, sans-serif', 
           color: '#A0A0A0', 

          }, 
          enabled: true, 
          //backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
          //borderColor: '#CCC', 
          itemMarginTop: 15 
          //borderWidth: 1, 
          //shadow: false 
         }, credits: { 
          enabled: false 
         }, 
         exporting: { enabled: divid == 'myModalInnerHtml' ? true : false }, 
         colors: colors 
         , 
         tooltip: { 
          headerFormat: '<b>{point.x}</b><br/>', 
          pointFormat: '{series.name}: ' + cur + '{point.y:,' + format + '}' 

         }, 
         plotOptions: { 
          column: { 
           stacking: chart_type == 'bar_simple_column' ? '' : 'normal', 
           dataLabels: { 
            enabled: true, 
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray', 
            format: '{point.y:,' + format + '}' 

           } 
          }, 
          series: { 
           stacking: chart_type == 'bar_simple_column' ? '' : 'normal', 
          }, 

          line: { 
           dataLabels: { 
            enabled: true, 
            format: '{point.y:,.2f}' 
           }, 

           enableMouseTracking: false 
          } 
         }, 
         series: JSON.parse(data.d), 

        });

來源

2017-01-03 Muhammad Atif Agha

請包括在產生該曲線圖中的問題的代碼。 –

請發現，代碼包括在內。 –

代碼假設你指的是dataLabel位置，你看到的是柱內移動的標籤時，沒有列以外分配足夠的空間。

這受軸極限值，軸maxPadding和各種數據標籤屬性的影響。

爲了確保他們總是顯示列以外，您可以添加crop，overflow和inside設置你的數據標籤選項：

plotOptions: { 
    column: { 
     dataLabels: { 
     enabled: true, 
     inside: false, 
     crop: false, 
     overflow: 'none' 
     } 
    } 
    }

請記住，這可能進而導致有問題的該標籤被圖表標題或圖表頂部的其他元素切斷或重疊。

您需要確保在標題和圖表之間留出足夠的空間，以防標籤被推上繪圖區域。

小提琴：

http://jsfiddle.net/jlbriggs/7n5w5as0/

參考：

來源

2017-01-03 14:16:09 jlbriggs

總價值數字通常與Highcharts條形圖中的條形重疊

回答

相關問題