0

我使用数据库中的 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");
    }    
  });  
}

谁能帮帮我吗..

4

1 回答 1

4

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

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

请让我知道它是否正确。

于 2013-03-15T03:55:53.830 回答