如何实施Google饼图（带有图例显示和相应的值）

本文介绍了如何实施Google饼图（带有图例显示和相应的值）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用数据库中的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.