highcharts - 如何在柱形图中隐藏零值

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#plotOptions.series.dataLabels.formatter

Answer 2

您可以使用数据标签格式化程序并添加检查值是否大于零的条件。

http://jsfiddle.net/DdvGm/

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

http://api.highcharts.com/highcharts#plotOptions.column.dataLabels.formatter

Answer 3

这是答案，如果现有答案正确，您的问题有多短，我不完全起诉。

在 highcharts 中，0 被认为是一个数字，因此它将在图表上呈现它。但是 null 是隐藏的。因此，当您添加数据时，您必须检查值是否为 0，如果是，则将其更改为 null。

如果您有任何问题，请告诉我。

小提琴： http: //jsfiddle.net/8kr0tods/看到may是0，mar是null，null是隐藏的。

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

Answer 4

在使用 react/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;
 }