Google pie chart 插件的使用
下列代码可实现选中多个slice饼图
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">google.charts.load(current, {
packages: [corechart]
});
var currentSelection = [false, false, false, false];
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chart = new google.visualization.PieChart(document.getElementById(piechart));
/* 下面的data用hard code写死，当然也可以利用ajax向后台请求获得JSON数据,格式如下：
* {
* "cols": [
* {
"id":"","label":"Topping","pattern":"","type":"string"},
* {
"id":"","label":"Slices","pattern":"","type":"number"}
* ],
* "rows": [
* {
"c":[{
"v":"Mushrooms","f":null},{
"v":3,"f":null}]},
* {
"c":[{
"v":"Onions","f":null},{
"v":1,"f":null}]},
* {
"c":[{
"v":"Olives","f":null},{
"v":1,"f":null}]},
* {
"c":[{
"v":"Zucchini","f":null},{
"v":1,"f":null}]},
* {
"c":[{
"v":"Pepperoni","f":null},{
"v":2,"f":null}]}
* ]
*}
*/
var data = new google.visualization.DataTable();
data.addColumn(string, TVModels);
data.addColumn(number, Amount);
data.addRows([[32HFL5011T/12, 333], [47HFL7011T/12, 2], [32HFL3009T/12, 22], [32HFL5009T/12, 10]]);
var options = {
sliceVisibilityThreshold: 0,
pieSliceText: percentage,// 显示百分比，如果要显示具体值，需要配置为pieSliceText: value
chartArea: {
left: 10,
top: 10,
width: 100%,
height: 90%
},
tooltip: {
trigger: none,
text: value
}
};
function selectHandler() {//选中某块slice触发的回调函数
var selectArray = [];
for (var i = 0,
len = currentSelection.length; i < len; i++) {
if (currentSelection[i]) {
var rowObj = {
row: i
};
selectArray.push(rowObj);
}
}
chart.setSelection(selectArray);
}
function clickHandler(targetID) {//点击某个slice的回调函数
if (targetID) {
var targetID = targetID["targetID"];
var sliceTargetIDText = "slice#";
var legendTargendIDText = "legendentry#";
var textToRemove = "";
var sliceNum = 0;
//判断点击对象：legend或者slice
if (targetID.search(sliceTargetIDText) == 0) {
textToRemove = sliceTargetIDText;
} else if (targetID.search(legendTargendIDText) == 0) {
textToRemove = legendTargendIDText;
} else {
return;
}
//提取slice号并更新到被选中的slice数组里。
sliceNum = Number(targetID.replace(textToRemove, ""));
currentSelection[sliceNum] = !currentSelection[sliceNum]; //toggle
}
}
//注册点击及选中handler回调函数以支持多重选中slice
google.visualization.events.addListener(chart, select, selectHandler);
google.visualization.events.addListener(chart, click, clickHandler);
chart.draw(data, options);
}</script>
</head>
<body>
<div id="tvmodelspie" style="width: 500px; height: 250px;">
<h3 align="center" class="piechartheader">TV Models</h3>
<div id="piechart"></div>
</div>
</body>
</html>