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

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

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

Answer 1

AmCharts中没有内置function可以执行此操作，但是您可以处理数据并使用图形对象来处理该特定类别中没有数据的情况。 您可以创建一个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处理程序，另一个没有：

 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]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Europe", "type": "column", "valueField": "europe" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "North America", "type": "column", "valueField": "namerica" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Asia-Pacific", "type": "column", "valueField": "asia" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Latin America", "type": "column", "valueField": "lamerica" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Middle-East", "type": "column", "valueField": "meast" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "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]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Europe", "type": "column", "valueField": "europe" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "North America", "type": "column", "valueField": "namerica" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Asia-Pacific", "type": "column", "valueField": "asia" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Latin America", "type": "column", "valueField": "lamerica" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "fillAlphas": 0.9, "fontSize": 11, "labelText": "[[percents]]%", "lineAlpha": 0.5, "title": "Middle-East", "type": "column", "valueField": "meast" }, { "balloonText": "[[title]], [[category]]
[[value]] ([[percents]]%)", "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; } 

    
Chart with custom fillEmptyCategories flag set
 
 
Chart without custom flag enabled