Java脚本谷歌饼图：如果没有要显示的数据，则显示一个空饼图
我目前在谷歌饼图上遇到了一些问题。 我有一个饼图，它最终正在工作，并向我显示饼图中的数据。
我现在的问题是，当饼图中没有数据显示时，什么都不会出现。 如果没有要显示的数据，我想显示一个空饼图。
作为替代方案，我也想总是显示一个空的饼图，然后让饼图动态加载饼图中的数据，所以我可以看到它发生。
希望你们能帮助我！ 对此，我真的非常感激。
我目前有以下javascript :(更新版本）
google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); var highRiskCategory1 = 0; var mediumHighRiskCategory1 = 0; var mediumRiskCategory1 = 0; var mediumLowRiskCategory1 = 0; var lowRiskCategory1 = 0; var xmlURL = ""; var xml; var firstDraw = true; // load google first google.charts.load('current', { callback: function () { // draw "no data" chart drawPiechartblank(); }, packages: ['corechart'] }); function loadData() { $j.ajax({ url: xmlURL, dataType: 'xml', beforeSend: function() { $j('#loader').show(); }, success: function(data) { xml = data; $j('#loader').hide(); createPiechartthree(); }, error: function(jqXHR, text) { console.log(text); drawPiechartblank(); return; } }); } function createPiechartthree(){ var columns = {}; var xmlColumns = $j('head', xml); xmlColumns.find('headColumn').each(function() { var columnName = $j(this).find('columnValue').text(); var columnID = $j(this).attr('columnid'); columns[columnName] = (columnID); }); var xmlData = $j('data', xml); xmlData.find('item').each(function() { $j(this).find('column').each(function() { var colID = $j(this).attr("columnid"); var value = $j(this).find('displayData').text(); if(colID == columns["Risk category"]){ if(value === "5. High Risk"){ highRiskCategory1++; } else if(value === "4. Medium High Risk"){ mediumHighRiskCategory1++; } else if(value === "3. Medium Risk"){ mediumRiskCategory1++; } else if(value === "2. Medium Low Risk"){ mediumLowRiskCategory1++; } else if(value === "1. Low Risk"){ lowRiskCategory1++; } } }); }); // check for data if ((highRiskCategory1 + mediumHighRiskCategory1 + mediumRiskCategory1 + mediumLowRiskCategory1 + lowRiskCategory1) === 0) { drawPiechartblank(); } else { drawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1); } } function drawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1) { var data = google.visualization.arrayToDataTable([ ['Is the counterparty a PEP?', 'Amount'], ['Very low', 0], ['High Risk', highRiskCategory1], ['Medium High Risk', mediumHighRiskCategory1], ['Medium Risk', mediumRiskCategory1], ['Medium Low Risk', mediumLowRiskCategory1], ['Low Risk', lowRiskCategory1], ['Very high', 0] ]); var options = { chartArea: { // allow room for selection highlight bottom: 12, left: 12, right: 12, top: 12, height: '100%', width: '100%' }, pieHole: 0.5, colors: ['#25b578', '#f05023', '#FF944A', '#F6BD53', '#FFE158', '#6FC968', '#8C8886'], slices: { 2: {offset: 0.02}, 3: {offset: 0.02}, 4: {offset: 0.02}, 5: {offset: 0.02}, }, }; var chart = new google.visualization.PieChart( document.getElementById('Piechartthree_div')); chart.draw(data, options); var selectHandler = function(e) { var selectedItem = chart.getSelection()[0]; if (selectedItem) { var topping = data.getValue(selectedItem.row, 0); console.log(topping); if(topping === 'High Risk'){ window.location.href = ''; } else if(topping === 'Medium High Risk'){ window.location.href = ''; } else if(topping === 'Medium Risk'){ window.location.href = ''; } else if(topping === 'Medium Low Risk'){ window.location.href = ''; } else if(topping === 'Low Risk'){ window.location.href = ''; } } } google.visualization.events.addListener(chart, 'select', selectHandler); } function drawPiechartblank() { var data = google.visualization.arrayToDataTable([ ['Is the counterparty a PEP?', 'Amount'], // blank first column removes legend, // use object notation for formatted value (f:) ['', {v: 1, f: 'No Data'}] ]); var options = { chartArea: { bottom: 12, left: 12, right: 12, top: 12, height: '100%', width: '100%' }, pieHole: 0.5, colors: ['transparent'], pieSliceBorderColor: '#9e9e9e', // show formatted value from the data pieSliceText: 'value', // default text style is white // won't show in center unless change color pieSliceTextStyle: { color: '#9e9e9e' }, tooltip: { trigger: 'none' } }; var chart = new google.visualization.PieChart( document.getElementById('Piechartthree_div') ); google.visualization.events.addListener(chart, 'ready', function () { // load data on first draw if (firstDraw) { firstDraw = false; loadData(); } }); chart.draw(data, options); } 
为了绘制饼图，谷歌需要至少一行，其值大于零
所以只需硬编码所需的数据……
var data = google.visualization.arrayToDataTable([ ['Is the counterparty a PEP?', 'Amount'], ['', {v: 1, f: 'No Data'}] ]);
对行标签使用空白字符串''将阻止图例显示
使用格式化的值f:在饼图的中心显示文本
这需要以下选项……
// show formatted value from the data pieSliceText: 'value', // default text style is white // won't show in center unless change color pieSliceTextStyle: { color: '#9e9e9e' },
要使图表看起来为空 ，请使用透明作为颜色并添加边框…
colors: ['transparent'], pieSliceBorderColor: '#9e9e9e',
请参阅以下工作代码段…
google.charts.load('current', { callback: drawPiechartblank, packages: ['corechart'] }); function drawPiechartblank() { var data = google.visualization.arrayToDataTable([ ['Is the counterparty a PEP?', 'Amount'], // blank first column removes legend, // use object notation for formatted value (f:) ['', {v: 1, f: 'No Data'}] ]); var options = { chartArea: { bottom: 12, left: 12, right: 12, top: 12, height: '100%', width: '100%' }, pieHole: 0.5, colors: ['transparent'], pieSliceBorderColor: '#9e9e9e', // show formatted value from the data pieSliceText: 'value', // default text style is white // won't show in center unless change color pieSliceTextStyle: { color: '#9e9e9e' }, tooltip: { trigger: 'none' } }; var chart = new google.visualization.PieChart( document.getElementById('Piechartthree_div') ); chart.draw(data, options); }