手柄在柱形圖空扶手的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

回答

相關問題