手柄在柱形图空扶手的AmCharts

我使用象下面AmCharts填充一个柱图表中的数据 - 手柄在柱形图空扶手的AmCharts

作为图所示，有2列的量，杆是不存在，因为没有数据。对于处理这两个酒吧，我们可以显示一些灰色或任何其他自定义栏来表示没有该分配的数据

2017-06-19 Dalton2

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

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>

来源

2017-06-20 11:29:40 xorspark

这工作得很好。但我认为，如果我在一个页面上有多个连续图表，那么它就不能工作，因为它会将更改应用到所有'系列'图表中。我该如何处理？ – Dalton2

如果需要，可以为特定图表的初始化事件而不是全局初始化处理程序设置它，或者设置自定义标志使其仅针对所需图表触发。我更新了我的答案以说明后者。 – xorspark

手柄在柱形图空扶手的AmCharts

回答

相关问题