总价值数字通常与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条形图中的条形重叠

回答

相关问题