Amchart不显示值= 0的数据

Question

Im working in a graph where data comes from server like Object's Array.

I dont need some data to show in my graph, data where number=0, and i want to know if amchart have some function to dont show this.

Here is an example of the code:

var data =[
{'number':1, 'date':'11:00-11:59', 'duration': 3},
{'number':2, 'date':'12:00-12:59', 'duration':6},
{'number':4, 'date':'13:00-13:59', 'duration':12},
{'number':8, 'date':'14:00-14:59', 'duration':8},
{'number':0, 'date':'14:00-14:59', 'duration':0}
];

var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"dataProvider": data,
"valueAxes": [{
    "id": "number",
    "position": "left",
    "title": "N Llamadas"
},{
    "id": "durationAxis",
    "position": "right",
    "title": "duration"
}],
"graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 1,
    "lineAlpha": 0.1,
    "type": "column",
    "valueField": "number"
},{
    "bullet": "square",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 1,
    "dashLengthField": "dashLength",
    "legendValueText": "[[value]]",
    "title": "duration",
    "fillAlphas": 0,
    "valueField": "duration",
    "valueAxis": "durationAxis"
}],
"depth3D": 20,
"angle": 30,
"chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
},
"categoryField": "date",
"categoryAxis": {
    "gridPosition": "start",
    "labelRotation": 0
},
"export": {
    "enabled": true
 }

});

In this case i dont want to show the last item of the array because number is 0, i shouldnt create a new array for reasons project. Thanks in advance

Answer 1

Not showing a graph object when a value is 0 is pretty much impossible without modifying the array due to the bullets of the line chart (you can hide a column using alphaField, but you can't remove the bullet). You can write an init handler that nulls out zero values so that the chart doesn't show the point or column at all upon chart initialization:

//Nulls out any field that contains a zero, effectively hiding the point/column from the chart.
//Note that the category will still be visible if both points are null unless you null out that category as well.
AmCharts.addInitHandler(function(chart) { 
  var valueFields = chart.graphs.map(function(graph) {
    return graph.valueField;
  });
  chart.dataProvider.forEach(function(dataItem) {
    valueFields.forEach(function(valueField) {
      if (dataItem[valueField] === 0) {
        dataItem[valueField] = null;
      }
    })
  })
}, ["serial"]);

Note that this will effect the data export (csv, xlsx, json) as well. If you want to re-add those zero values to the data export, you can use the processData callback in the export plugin to modify your data to re-add the zeroes:

"export": {
    "enabled": true,
     //re-add nulled out values as zeroes for data export:
    "processData": function(data, cfg) {
      var valueFields = this.setup.chart.graphs.map(function(graph) {
        return graph.valueField;
      });
      data.forEach(function(dataItem) {
        valueFields.forEach(function(valueField) {
          if (dataItem[valueField] == null) {
            dataItem[valueField] = 0;
          }
        });
      });
      return data;
    }
 }

Demo