我的网站上有一些饼图和连续图表,当没有数据时,两张图表无法正常显示。一个图表(饼图)不显示任何内容,另一个图表(序列)抛出错误amcharts.js:113 Uncaught TypeError: Cannot read property 'push' of undefined
。
我通过Ajax获取数据,并检查了控制台的响应数据。
这是我的饼图代码:
jQuery.post('http://....', data, function(response) {
types_ytd = (response)
dataProvider = generateChartDataYtd();
chart = AmCharts.makeChart("chartdiv_ytd", {
"type": "pie",
"theme": "light",
"dataProvider": dataProvider,
"labelText": "[[title]]: [[value]]%",
"balloonText": "[[title]]: [[value]]% [[[description]]]",
"titleField": "type",
"valueField": "percent",
"descriptionField":"sales",
"outlineColor": "#FFFFFF",
"outlineAlpha": 0.8,
"outlineThickness": 2,
"colorField": "color",
"pulledField": "pulled",
"titles": [{
"text": ""
}],
"listeners": [{
"event": "clickSlice",
"method": function(event) {
var chart = event.chart;
if (event.dataItem.dataContext.id != undefined) {
selected = event.dataItem.dataContext.id;
} else {
selected = undefined;
}
chart.dataProvider = generateChartDataYtd();
chart.validateData();
}
}],
"export": {
"enabled": true
}
});
AmCharts.addInitHandler(function(chart) {
// check if data is mepty
if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
// add some dummy data
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
// disable slice labels
chart.labelsEnabled = false;
// add label to let users know the chart is empty
chart.addLabel("50%", "50%", "The chart contains no data for selected month", "middle", 15);
// dim the whole chart
chart.alpha = 0.3;
}
}, ["pie"]);
}, 'json');
Here's the serial chart code:
jQuery.post('http://...', data, function(response) {
types_model_ytd = (response)
dataProvider = generateChartDataModelYtd();
chart = AmCharts.makeChart("chartdiv_model_ytd", {
"type": "serial",
"theme": "none",
"dataProvider": dataProvider,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "%"
}],
// set startDuration to 0 on older browsers
"startDuration": supportsSVG() ? 0 : 0,
"graphs": [{
"balloonText": "[[category]]: [[value]]% [[[sales]]]",
"colorField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "percent",
"fixedColumnWidth": 20
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "type",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
}
});
AmCharts.checkEmptyData = function(chart) {
if (0 == chart.dataProvider.length) {
// set min/max on the value axis
chart.valueAxes[0].minimum = 0;
chart.valueAxes[0].maximum = 0;
// add dummy data point
var dataPoint = {
dummyValue: 0
};
dataPoint[chart.categoryField] = '';
chart.dataProvider = [dataPoint];
// set opacity of the chart div
chart.chartDiv.style.opacity = 0.5;
//remove balloonText and labels
chart.categoryAxis.labelFunction = function(valueText) {
return '';
}
// add label
chart.addLabel(1, '50%', 'The chart contains no data for selected month', 'center');
// redraw it
chart.validateNow();
}
}
AmCharts.checkEmptyData(chart);
}, 'json');
我已经尝试了我能找到的所有解决方案,但没有任何效果,任何帮助或建议都将不胜感激,谢谢。