javascript - Google 饼图尝试在 API 完成加载之前绘制

Question

我在使用 Google 图表时遇到了一些问题。这是我的饼图的代码:

编辑部分

function displayExistHospital(){
queryTask = new esri.tasks.QueryTask(overlayURLs["moh_hospital_WSA2"] + "/10");
query = new esri.tasks.Query();
query.returnGeometry = false;
query.where = "1=1";
query.outFields = ["*"];

queryTask.execute(query, getExistHospitalData);

document.getElementById("tabsLabel").style.display = "block";
document.getElementById("tabsLabel3").innerHTML = "Age > 60";
document.getElementById("tabsLabel2").innerHTML = "SCPR";
document.getElementById("tabsLabel1").innerHTML = "Total Pop";

}
google.load("visualization", "1", {packages:["corechart"], callback: displayExistHospital});

var arrList = [];
function getExistHospitalData(results){
arrList = [];
var features = results.features;
dojo.forEach(features, function(feature){
var tempArr = [];
    var total_SCPR = feature.attributes.SUM_SUM_TOTAL_SCPR;
    var total_NR = feature.attributes.SUM_SUM_TOTAL_NR;
    var time = feature.attributes.FIRST_E_BREAK;
    tempArr.push(time,total_SCPR,total_NR);
    arrList.push(tempArr);
});

displayExistHospitalGraph(arrList); 
}

function displayExistHospitalGraph(arrListData){
var total_ten = parseInt(arrListData[0][1]) + parseInt(arrListData[0][2]);
var total_tentoFifteen = arrListData[1][1] + arrListData[1][2];
var total_fifteenTwenty = arrListData[2][1] + arrListData[2][2];
var total_greaterTwenty = arrListData[3][1] + arrListData[3][2];

var ppl_num = total_ten + total_tentoFifteen; 
var total_pop = total_ten + total_tentoFifteen + total_fifteenTwenty + total_greaterTwenty;
var dataOne = google.visualization.arrayToDataTable([
    ['Population', 'Percentage'],
    ['<10 mins' +getPercentageInString(total_ten,total_pop) , total_ten],
    ['10 - 15 mins' +getPercentageInString(total_tentoFifteen,total_pop), total_tentoFifteen],
    ['15 - 20 mins' +getPercentageInString(total_fifteenTwenty,total_pop), total_fifteenTwenty],
    ['>20 mins' +getPercentageInString(total_greaterTwenty,total_pop) , total_greaterTwenty],   
]);
var percentage = (((total_ten / total_pop) + (total_tentoFifteen / total_pop)) * 100).toFixed(1);
var title = "Total Population ("+total_pop.toLocaleString()+") Catchment By Drive-Time(Existing)";

var optionsOne = {
    chartArea: {
        width: 350,
        height: 200,
        top: 20, 
        left: 10 
    },
    fontName: 'Arial',
    fontSize: getFontSize(),
isStacked:false,
    title: title,
    width: 400,
height: 200,
    sliceVisibilityThreshold: 0,
    colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF']
};

document.getElementById('hospitalBoxContent').innerHTML= "</br><p ><span style='font-size:2em; color:#00297A; font-family:ArialVerdana; font-weight:bold;'>"+percentage+"% ("+ppl_num.toLocaleString()+")</span > of residents stay within <span style='font-size:2em; color:#00297A; font-family:ArialVerdana; font-weight:bold;'>15-min</span> drive-time to a public hospital </p><br/>";
var chart = new google.visualization.PieChart(document.getElementById('displayHospitalGraph'));
chart.draw(dataOne, optionsOne);

}

图表有效，但饼图上的百分比不知何故被 chop ，如下图所示:

我想知道有没有办法调整百分比，例如，将它移近中心，这样它就不会被切断？我知道原因是因为图表试图在 API 完成加载之前绘制，因为这只会在第一次加载时发生。切换几个图表后，百分比标签将很好地放置在图表内。

感谢@asgallant 和@Yoann，他们帮助我发现了错误，但在添加代码后，问题仍然没有解决。

提前致谢。

Answer 1

请将最后一个颜色#FFFFFF 更改为任何其他颜色#FFFFFF 此颜色与背景相同