0

У меня есть гистограмма, часто общая наложенность на нее, как показано ниже. Я попытался уменьшить область графика, ширины и высоты, эта проблема решена, но для некоторых других значений возникает снова, существует ли какое-либо постоянное решение, чтобы избежать перекрытия? enter image description hereОбщие значения, часто совпадающие с барами в Highcharts Barchart

Вы найдете ниже код

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

        }); 
+0

Пожалуйста, включите код, который генерирует этот график в этом вопросе. –

+0

найти, код в комплекте. –

ответ

1

Предполагая, что вы имеете в виду dataLabel позиции, что вы видите, это метка перемещается внутри колонны, когда не хватает места отведено вне колонны ,

На это влияют крайние оси, ось maxPadding и различные свойства этикеток данных.

Для того, чтобы убедиться, что они всегда показывают вне столбца, вы можете добавить crop, overflow и inside настройки в параметры метки данных:

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

Имейте в виду, что это может потом вызвать проблемы с ярлык обрезается или перекрывается, название диаграммы или другие элементы в верхней части диаграммы.

Вам нужно убедиться, что вы разрешаете достаточно места между заголовком и диаграммой, в случае, если метка нажимается над областью графика.

Fiddle:

Ссылка: