如何实现谷歌饼图(与图例显示和相应的值)
How to implement Google Pie chart(with legend display and corresponding values)
我已经创建了谷歌饼图使用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");
}
});
}
有谁能帮帮我吗
我的猜测是你可以尝试以下:-
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]);
}
请告诉我是否正确
相关文章:
- 如何在没有按钮的情况下实现显示隐藏JavaScript
- Meteoric(Meteor Ionic)软件包实现故障——Ionic样式未显示
- 如何用ajax实现加载显示
- 如何在JavaScript中实现html语法高亮显示
- 在实现后立即显示子元素
- AngularJS:如何实现全局错误处理程序并显示错误
- 在文本区域中实现 HTML 语法突出显示以编写代码
- 如何在不显示弹出窗口的情况下实现推特关注
- 如何使用jquery实现垂直图像滑块,其中在显示新图像之前,它将关闭并使用新图像打开
- 如何在这里实现隐藏和显示列表中的项目
- I'我正在尝试建立一个基本的网站来显示MySQL中的数据.有没有办法只使用javascript和HTML来实现这
- 如何在显示/隐藏文本时实现平滑过渡
- JQuery——如何实现类似macos dock的显示/隐藏行为的动画
- 如何使用javascript实现隐藏和显示单选按钮
- 我们如何将html元素作为参数传递到handlebaelper中,以实现显示更多/更少的功能
- 在不访问标记的情况下实现jquery显示/隐藏切换
- 使用一个按钮可以实现两个功能——显示内容和提交
- 如何使用JavaScript使Google Chrome DevTools控制台实现全屏显示
- 如何在网页中实现一个可以突出显示LaTeX和AMS关键字的编辑器
- react router 1.0.0-rc1的基本实现显示错误