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);

}

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

enter image description here

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

@asgallant和@Yoann的信用，因为他们帮助我发现了错误但是在添加了代码之后，它仍然无法解决。

提前致谢。

Answer 1

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

Answer 2

截图中的某些元素被截断。

对于标题，您需要在optionsOne.chartArea（和height）中增加顶部
表示图例，增加宽度或减少optionsOne.chartArea中的左侧
最后一个饼图设置为白色：[＆＃39;＃004CA8＆＃39;，＆＃39;＃437DC4＆＃39;，＆＃39;＃96B8E0＆＃39;，＆＃ 39;＃FFFFFF＆＃39;]，更改字体颜色或最后颜色以避免白色白色

编辑：

我使用您的代码创建了http://jsfiddle.net/X24Sy/3/，我无法重现您的问题。你的容器有CSS吗？

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
    function drawChart(){
        var total_ten=15,total_tentoFifteen=35,total_fifteenTwenty=50,total_greaterTwenty=10;
        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: 12,
            legend: { alignment: 'center', textStyle: { fontSize: 12} },
            // pieSliceText: 'none',       //label - > show the name on the pie
            tooltip: { 
                trigger: 'focus'// focus -> tooltip will be displayed when the user hovers over an element.
                // none -> tooltip is not displayed 
            }, 
            isStacked:false,
            title: title,
            width: 350,
            height: 200,
            sliceVisibilityThreshold: 0,
            colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF']
        };
        var chart = new google.visualization.PieChart($('#displayHospitalGraph')[0]);
        chart.draw(dataOne, optionsOne);                            
    }

Answer 3

问题在于：

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);
    });

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(displayExistHospitalGraph(arrList));
}

首先，您要在任何其他功能之外调用google.load。第二，这一行：

google.setOnLoadCallback(displayExistHospitalGraph(arrList));

以displayExistHospitalGraph为参数调用您的arrList函数，并将其返回值（null）传递给google.setOnLoadCallback。这意味着您的绘图功能正在立即执行，而不是在回调中执行。请尝试这种方法：

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 init () {
    // get "results" and feed them to getExistHospitalData
    getExistHospitalData(results);
}
google.load("visualization", "1", {packages:["corechart"], callback: init});

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

3 个答案: