如何实施Google饼图（带有图例显示和相应的值） [英] How to implement Google Pie chart(with legend display and corresponding values)

问题描述

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

我正在执行的Google饼图代码是（片段）： -

  function drawChart（data）
 {
 var hi_cnt = data.length; 
 var gdata = new google.visualization.DataTable（）; 
 var total = 0; 
 gdata.addColumn（'string'，'Task'）; 
 gdata.addColumn（'数字'，'每小时'）; 
 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：'按类型划分的数量'，
'width'：750，
' height'：450，
 backgroundColor：'#EEE'，
 legend：{position：'right'}，
 areaOpacity：1.0，
 sliceVisibilityThreshold：0，
 // vAxis：{格式：'＃$'}，
 // hAxis：{title：'????'，titleTextStyle：{color：'blue'}，slantedText：true，viewWindow：{min： 39，max：52}}，
 //颜色：['CCFFCC'，'66CC66'，'FF9999']，
 //动画：{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（
 {
类型：POST，
 url：mh_url，
 data：dataString，
 dataType： json，
成功：函数（数据）
 {
 drawChart（数据）; 
}，
错误：函数（数据）
 {
 alert（fail）; 
} 
}）; 
} 
  

任何人都可以请我帮忙..

<我猜你可以尝试以下方法： - $ / $>

  var total = 0; 
 for（var i = 0; i< data.getNumberOfRows（）; i ++）{
 
 total + = data.getValue（i，1）; 
 
 //获取数据
 var label = data.getValue（i，0）; 
 var value = data.getValue（i，1）; 
 var percent = Math.ceil（1000 * value / total）/ 10; 
 
 //这将为显示创建图例列表
 lis [i] = document.createElement（'li'）; 
 lis [i] .id ='legend_'+ data.getValue（i，0）; 
 lis [i] .innerHTML ='< div class =legendMarkerstyle =background-color：'+ colors [i] +';>< / div>'+ label +'： '+ value +'（'+ percent +'％）< / span>'; 
 
 
 legend.appendChild（lis [i]）; 
} 
  

请让我知道它是否正确。

I have created google pie chart using json data from database. The pie chart was created with legend name, but i want also display legend with value,that is the name with value besides the piechart.I am trying out different stuffs but I am completely stumped by this.

The google pie chart code which I am implementing is(snippet):-

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

Can anyone please help me..

解决方案

My guess is you can try the following :-

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

Please let me know if it is right.

这篇关于如何实施Google饼图（带有图例显示和相应的值）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！