处理AmCharts柱形图中的空条 [英] Handle Empty bars in column chart in AmCharts

问题描述

我正在使用如下所示的AmCharts在柱形图中填充数据-

I am populating the data in a column chart using AmCharts like below -

如图所示，因为没有数据，所以有2列的栏不存在.为了处理这两个条，我们可以显示一些灰色还是其他自定义条以表示该分布没有数据

As the picture shows, there 2 columns for which the bar is not there because there is no data. For handling these two bars, can we show some gray color or any other custom bar to signify there`s no data for that distribution

推荐答案

AmCharts中没有内置功能可以执行此操作，但是您可以处理数据并在没有数据的情况下使用图形对象该特定类别.您可以像这样创建一个初始化处理程序，为图表设置为您设置标志(添加对自定义标志的检查，使其仅在相关图表上运行，而不是在所有系列图表上运行):

There isn't a built-in feature within AmCharts that does this, however you can process your data and use a graph object for cases where no data is in that particular category. You can create an init handler that sets the flag for you on chart initialization like so (adding a check for a custom flag so that it only runs on the relevant charts instead of all series charts):

AmCharts.addInitHandler(function(chart) { 
  if (!chart.fillEmptyCategories) { 
    //use a custom flag to determine whether to activate this on a particular chart
    return;
  }
  //collect all the valueFields
  var dataFields = chart.graphs.map(function(graph) {
    return graph.valueField;
  });
  //update the dataProvider, setting the noData property on
  //any array element that does not have any data for a particular category
  chart.dataProvider.forEach(function(dataItem) {
    var allEmpty = dataFields.every(function(dataField) {
      return dataItem[dataField] === undefined;
    });
    if (allEmpty) {
      dataItem.noData = 1; 
    } 
  });
}, ["serial"]);

您的空数据列对象将如下所示:

Your empty data column object would look like this:

  graphs: [
    // other graphs omitted
    {
      //hide from legend and disable balloon if desired
      "visibleInLegend": false, 
      "showBalloon": false,
      "labelText": "No data",
      "type": "column",
      "fillAlphas": 1,
      "lineAlphas": 0,
      "lineThickness": 0,
      "fillColors": "#ececec",
      "valueField": "noData"
    }]

下面的演示，其中一个图表启用了自定义标记以运行init处理程序，而另一个图表则没有:

Demo below, one chart with a custom flag enabled to run the init handler and one without:

AmCharts.addInitHandler(function(chart) {
  if (!chart.fillEmptyCategories) {
    //use a custom property to make this init handler only fire on specific charts
    //that have it set to true.
    return;
  }
  //collect all the valueFields
  var dataFields = chart.graphs.map(function(graph) {
    return graph.valueField;
  });
  //update the dataProvider, setting the noData property on
  //any array element that does not have any data for a particular category
  chart.dataProvider.forEach(function(dataItem) {
    var allEmpty = dataFields.every(function(dataField) {
      return dataItem[dataField] === undefined;
    });
    if (allEmpty) {
      dataItem.noData = 1;
    }
  });
}, ["serial"]);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "fillEmptyCategories": true,
  "legend": {
    "position": "right",
    "borderAlpha": 0.2,
    "equalWidths": true,
    "horizontalGap": 10,
    "markerSize": 10,
    "useGraphSettings": true,
    "valueWidth": 0
  },
  "dataProvider": [{
    "year": "2002",
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1
  }, {
    "year": "2003",
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }, {
    "year": "2004"
  }, {
    "year": "2005"
  }, {
    "year": "2006",
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }],
  "valueAxes": [{
    "stackType": "100%",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "position": "left"
  }],
  "graphs": [{
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Europe",
    "type": "column",
    "valueField": "europe"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "North America",
    "type": "column",
    "valueField": "namerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Asia-Pacific",
    "type": "column",
    "valueField": "asia"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Latin America",
    "type": "column",
    "valueField": "lamerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Middle-East",
    "type": "column",
    "valueField": "meast"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Africa",
    "type": "column",
    "valueField": "africa"
  }, {
    //hide from legend and disable balloon if desired
    "visibleInLegend": false,
    "showBalloon": false,
    "labelText": "No data",
    "type": "column",
    "fillAlphas": 1,
    "lineAlphas": 0,
    "lineThickness": 0,
    "fillColors": "#ececec",
    "valueField": "noData"
  }],
  "marginTop": 30,
  "marginRight": 0,
  "marginLeft": 0,
  "marginBottom": 40,
  "autoMargins": false,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0
  }
});

//second one to demonstrate the handler not firing.
var chart = AmCharts.makeChart("chartdiv2", {
  "type": "serial",
  "theme": "light",
  "legend": {
    "position": "right",
    "borderAlpha": 0.2,
    "equalWidths": true,
    "horizontalGap": 10,
    "markerSize": 10,
    "useGraphSettings": true,
    "valueWidth": 0
  },
  "dataProvider": [{
    "year": "2002",
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1
  }, {
    "year": "2003",
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }, {
    "year": "2004"
  }, {
    "year": "2005"
  }, {
    "year": "2006",
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }],
  "valueAxes": [{
    "stackType": "100%",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "position": "left"
  }],
  "graphs": [{
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Europe",
    "type": "column",
    "valueField": "europe"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "North America",
    "type": "column",
    "valueField": "namerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Asia-Pacific",
    "type": "column",
    "valueField": "asia"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Latin America",
    "type": "column",
    "valueField": "lamerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Middle-East",
    "type": "column",
    "valueField": "meast"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Africa",
    "type": "column",
    "valueField": "africa"
  }, {
    //hide from legend and disable balloon if desired
    "visibleInLegend": false,
    "showBalloon": false,
    "labelText": "No data",
    "type": "column",
    "fillAlphas": 1,
    "lineAlphas": 0,
    "lineThickness": 0,
    "fillColors": "#ececec",
    "valueField": "noData"
  }],
  "marginTop": 30,
  "marginRight": 0,
  "marginLeft": 0,
  "marginBottom": 40,
  "autoMargins": false,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0
  }
});

#chartdiv, #chartdiv2 {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<h3>Chart with custom fillEmptyCategories flag set</h3>
<div id="chartdiv"></div>
<h3>Chart without custom flag enabled</h3>
<div id="chartdiv2"></div>

这篇关于处理AmCharts柱形图中的空条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！