Как скрыть нулевые значения в столбчатой ​​диаграмме

Question

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

var series = {  data: [],   
                dataLabels: {
                    enabled: true,
                    color: 'black',
                    align: 'right',
                    x: -3,
                    y: 3,
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                    }
                },
                pointWidth: 28
};

Answer 1

Вы можете использовать форматтер. Примерно так должно это сделать:

dataLabels: {
  formatter:function() {
    if(this.y != 0) {
      return this.y;
    }
  }
}

http://api.highcharts.com/highcharts

Answer 2

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

http://jsfiddle.net/DdvGm/

plotOptions: {
        series: {
            dataLabels:{
                enabled:true,
                formatter:function(){
                    if(this.y > 0)
                        return this.y;
                }
            }
        }
    },

http://api.highcharts.com/highcharts

Answer 3

Вот ответ, насколько короткий ваш вопрос, я не в полном объеме, если существующие ответы верны.

В старших чартах 0 считается числом, поэтому оно будет отображаться на графиках. Но ноль скрыт. Поэтому, когда вы добавляете данные, вы должны проверить, если значение равно 0, и если оно есть, то измените его на ноль.

Дайте мне знать, если у вас есть вопросы.

Скрипка: http://jsfiddle.net/8kr0tods/ Посмотрите, что may это 0, а mar нуль, а ноль скрыт.

    if($VAL==0)
    {
        $VAL='null';
    }

Answer 4

У меня возникла проблема с ответами выше при использовании экспортированного класса с помощью response /typescript. "This", которое попадало в функцию, было "this" для класса, а не ожидаемым.

Чтобы решить эту проблему, мне пришлось переместить функцию за пределы экспортированного класса. Вот пример.

export class MyClass extends React.Component<MyClassProps,any> {
     drawChart() {
          const options = {
               ...
                series: [{
                     ...
                     dataLabels: {
                          ...
                          formatter: formatter
                     }
                }]
           }
           ...
      }
 }

 function formatter() {
      if (this.y != 0) //My use case was different, so I used this.point.value
           return this.y;
 }