ハイチャートの棒グラフと重なっていることが多い合計値Barchart

私は棒グラフを持っていますが、以下のようにしばしば合計値が重なっています。グラフの幅、幅、高さを減らそうとしましたが、この問題は解決されましたが、他の値が再び発生すると、オーバーラップを避けるための恒久的な解決策はありますか？ハイチャートの棒グラフと重なっていることが多い合計値Barchart

あなたは dataLabel位置を参照している列の外に割り当てられた十分なスペースがないとき、何を見ていることは、ラベルが列内に移動されていると仮定すると

$('#' + 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

質問にこのグラフを生成しているコードを記載してください。 –

コードを見つけてください。 –

以下のコードを見つけてください。。

これは軸の極値、軸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

ハイチャートの棒グラフと重なっていることが多い合計値Barchart

答えて

関連する問題