如何实现谷歌饼图(与图例显示和相应的值)

Question

我已经创建了谷歌饼图使用json数据从数据库。饼图是用图例名称创建的，但我还想显示带值的图例，即除了皮哈特之外的带值的名称。我正在尝试不同的东西，但我完全被这个难住了。

我正在实现的google饼图代码是(代码片段):-

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

请告诉我是否正确