如何实现谷歌饼图（带有图例显示和相应的值）

Question

我已经创建谷歌饼图使用数据库中的json数据。饼图是用传说名称创建的，但我也想显示具有价值的传说，这是除了饼图以外的价值的名称。我尝试了不同的东西，但我完全被这个难住了。

其中我实现

在谷歌饼图代码是（片段）： -

function drawChart(data) 
{ 
    var hi_cnt = data.length; 
    var gdata = new google.visualization.DataTable(); 
    var total = 0; 
    gdata.addColumn('string', 'Task'); 
    gdata.addColumn('number', 'Hours Per Day'); 
    gdata.addRows(hi_cnt); 
    for (var i= 0;i < hi_cnt; i++) 
    { 
     gdata.setCell(i, 0, data[i]['name']); 
     gdata.setCell(i, 1, parseInt(data[i]['count'])); 

    } 

    var options = { 
     title: 'Number of Issues By Type', 
     'width': 750, 
     'height': 450, 
     backgroundColor: '#EEE', 
     legend: {position: 'right'}, 
     areaOpacity: 1.0, 
     sliceVisibilityThreshold:0, 
     //vAxis: {format: '# $'}, 
     //hAxis: {title: '????', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 39, max: 52}}, 
     //colors: ['CCFFCC', '66CC66', 'FF9999'], 
     //animation: {duration: 1000, easing: 'out'} 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('outer_tableDiv')); 
    chart.draw(gdata, options); 
} 

function getHealthReport() 
{ 
    var dataString = {auth_token: sessionStorage.auth_token,}; 
    var mh_url = MH_HOST + '/reports/get_health_issues_report.json'; 

    $.ajax(
    { 
    type: "POST", 
    url: mh_url, 
    data: dataString, 
    dataType: "json", 
    success: function (data) 
    { 
     drawChart(data);  
    }, 
    error: function (data) 
    { 
     alert("fail"); 
    }  
    }); 
} 

谁能请帮助我..

Answer 1

我的猜测是，你可以尝试以下方法： -

var total = 0; 
for (var i = 0; i < data.getNumberOfRows(); i++) { 

    total += data.getValue(i, 1); 

    // get the data 
    var label = data.getValue(i, 0); 
    var value = data.getValue(i, 1); 
    var percent = Math.ceil(1000 * value/total)/10; 

    // This will create legend list for the display 
    lis[i] = document.createElement('li'); 
    lis[i].id = 'legend_' + data.getValue(i, 0); 
    lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';"></div>' + label + ': ' + value + ' (' + percent + '%)</span>'; 


    legend.appendChild(lis[i]); 
} 

请让我知道它是否正确。