我正在使用 AmCharts 在柱形图中填充数据，如下所示 -
如图所示，有 2 列的条不存在，因为没有数据。为了处理这两个条，我们可以显示一些灰色或任何其他自定义条以表示该分布没有数据
问问题
1397 次
1 回答
2
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 处理程序的图表和一个没有：
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>于 2017-06-20T11:29:40.397 回答