Question

我使用下面的AmCharts填充柱形图中的数据 -

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

Answer 1

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

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

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

＆＃13;

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
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: