Экспорт Highcharts скрывает метки данных, если число не помещается на полосе с накоплением

Я работаю с highcharts и хотел бы отключить метки данных на основном графике, но показать их на экспортированном графике. Однако, если данные меньше определенного числа, я хотел бы также скрыть метки в экспортированном графике. Я видел этот пост о том, как управлять тем, какие метки данных отображаются в зависимости от высоты: Линейчатая диаграмма с накоплением Highcharts скрывает метки данных, чтобы они не перекрывались. Однако я не уверен, как отображать определенные метки данных только в экспортированном графике. Это мой график: https://jsfiddle.net/er1187/nbjh5jz3/ Когда я экспортирую, Я хочу скрыть эти метки данных, которые не отображаются должным образом: введите здесь описание изображения

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

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

export highcharts labels
person ellier7    schedule 08.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

демонстрация скрипта со ссылкой на этот post. это один из типов хака с форматтером dataLabels и событием load

Highcharts.setOptions({ // Apply to all charts
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'bar',
    events: {
      load: function() {
        var chart = this;

        $.each(chart.series, function(i, serie) {
          $.each(serie.data, function(j, data) {

            if (data.yBottom - data.plotY < 15) data.dataLabel.hide();
            //
          });
        });
      }
    }
  }
});

Highcharts.chart('container', {
  exporting: {
    chartOptions: {
      legend: {
        enabled: false,
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          dataLabels: {
            inside: true,
            enabled: true,
            style: {
              fontSize: '5px',
              textOutline: 'none'
            },
            formatter: function() {
              return Highcharts.numberFormat(this.y, 1)
            }
          }
        }
      }
    }
  },

  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        formatter: function() {
          return ''
        }
      }
    },

  },

  series: [{
    name: 'one',
    data: [5.24957, -1.636452, 5.511623, -5.797109, 6.975687, 4.622862, 2.902466, 3.992426, -0.270407, 3.184849, 12.249839]
  }, {
    name: 'two',
    data: [-1.311533, 2.508312, .97956, -1.725764, 5.177992, 2.1262, 5.41721, 53.811967, 4.060668, -1.317636, 13.763589]
  }]
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Обновить

Приведенный выше пример работает со всеми форматами, кроме PDF, при использовании экспорта на стороне клиента.

Исправить с помощью цепочек из сообщения. Вместо того чтобы скрывать ярлыки, уничтожьте их при загрузке

Highcharts.setOptions({ // Apply to all charts
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'bar',
    events: {
      load: function() {
        var chart = this;

        $.each(chart.series, function(i, serie) {
          $.each(serie.data, function(j, data) {
            if (data.yBottom - data.plotY < 15) data.dataLabel = data.dataLabel.destroy();
            //
          });
        });
      }
    }
  }
});
person Deep 3015    schedule 08.06.2017
comment
Большое спасибо за Вашу помощь! Я забыл упомянуть, что я использую автономный экспорт. Когда я добавляю этот код в свое приложение, он все равно не работает, если только я не использую автономный режим. - person ellier7; 08.06.2017
comment
я использую скрипку из экспорт на стороне клиента проверьте это скрипка - person Deep 3015; 08.06.2017
comment
Ах, я вижу, я тестировал с помощью PDF. Ваш пример работает во всех форматах, кроме PDF - person ellier7; 08.06.2017
comment
@ellier7 проверить решение, сделанное pawelfus здесь - person Deep 3015; 09.06.2017