在 AmCharts 中处理柱形图中的空条

Question

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

如图所示，有2列因为没有数据而没有柱状图。为了处理这两个条，我们可以显示一些灰色或任何其他自定义条来表示该分布没有数据

Answer 1

AmCharts 中没有执行此操作的内置功能，但是您可以处理数据并在特定类别中没有数据的情况下使用图形对象。您可以创建一个初始化处理程序，在图表初始化时为您设置标志，就像这样（添加对自定义标志的检查，以便它只在相关图表而不是所有系列图表上显示运行s）：

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"]);

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

  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"
    }]

下面的演示，一张图表启用了运行初始化处理程序的自定义标志，另一张图表没有：

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 中处理柱形图中的空条

Handle Empty bars in column chart in AmCharts

jquery

amcharts

column-chart