Charts 谷歌图表：基于图例的饼图切片

google.load（'visualization'，'1.1'{
包：[“控件”]
});
load（'visualization'，'1'，'{
包：['表']
});
load（'visualization'，'1.0'，'{
“包”：[“核心图表”]
});
setOnLoadCallback（drawVisualization）；
函数drawVisualization（）{
var data=[{tagId:'2a:10'，isSafe:'Safe'}，{tagId:'dd:80'，isSafe:'Safe'}，{tagId:'0a:07'，isSafe:'Safe'}，{tagId:'29:11'，isSafe:'Safe'}]；
var dataArray=[]；
var datatable=new google.visualization.datatable（）；
addColumn（'string'，'TagID'）；
addColumn（'string'，'Status'）；
$。每个（数据、功能（i、obj）{
push（[obj.tagId，obj.isSafe]）；
});
addRows（dataArray）；
var tagDivPicker=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“tag_control_div”，
“选项”：{
filterColumnIndex:0，
“用户界面”：{
“标签固定”：“垂直”，
“allowTyping”：false，
“allowMultiple”：false
//，'cssClass'：'form-control1 input sm m-bot15'
}
}
});
var table_data=new google.visualization.ChartWrapper({
“图表类型”：“表格”，
“containerId”：“表_数据”，
“视图”：{
“列”：[0，1]
}
});
var dataGroupColumnChart=google.visualization.data.group(
数据表[1][{
“列”：1，
“聚合”：google.visualization.data.count，
“类型”：“编号”
}]);
var pieChart=new google.visualization.ChartWrapper({
'chartType'：'PieChart'，
“集装箱运输”：“饼图”，
“dataTable”：dataGroupColumnChart，
选项：{
“宽度”：600，
‘高度’：400，
标题：“完全合规”，
切片：{0:{color:'green'}，1:{color:'red'}
}
});
pieChart.draw（）；
//创建仪表板。
var dashboard=新的google.visualization.dashboard（文档
.getElementById（“仪表板”）
.bind（[tagDivPicker]，
[表_数据]；
dashboard.draw（数据表）；
google.visualization.events.addListener（tagDivPicker，'statechange'，函数（事件）{
pieChart.setDataTable（google.visualization.data.group(
//获取过滤后的结果
表_data.getDataTable（），
[2], [{
“列”：2，
“聚合”：google.visualization.data.count，
“类型”：“编号”
}]
));
//重新绘制饼图以反映更改
pieChart.draw（）；
});
}

---

1.不需要同时使用

jsapi

和

loader.js

另外，根据

通过

jsapi

loader仍然可用的谷歌图表版本不再持续更新。从现在起，请使用新的gstatic加载程序（

loader.js

）

这将把

load

语句更改为

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['controls', 'corechart', 'table']
});

（您可以在

load

语句中包含

回调

）

2.由于饼图是单独绘制的，因此将数据从表格图表中聚集，
每次触发

'ready'

事件时

然后，根据表格图表中的行值，使用

colors

选项指定切片颜色

请参阅以下工作片段

google.charts.load（'current'{
回调：drawVisualization，
包：['controls'，'corechart'，'table']
});
函数drawVisualization（）{
var data=[{tagId:'2a:10'，isSafe:'Safe'}，{tagId:'dd:80'，isSafe:'Safe'}，{tagId:'0a:07'，isSafe:'Safe'}，{tagId:'29:11'，isSafe:'Safe'}]；
var dataArray=[]；
var datatable=new google.visualization.datatable（）；
addColumn（'string'，'TagID'）；
addColumn（'string'，'Status'）；
$。每个（数据、功能（i、obj）{
push（[obj.tagId，obj.isSafe]）；
});
addRows（dataArray）；
var tagDivPicker=new google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
集装箱：“标签控制分区”，
选项：{
filterColumnIndex:0，
用户界面：{
标签定位：“垂直”，
allowTyping:false，
allowMultiple:正确
}
}
});
var table_data=new google.visualization.ChartWrapper({
chartType:'表'，
containerId:“表_数据”，
视图：{
列：[0,1]
}
});
var dashboard=新的google.visualization.dashboard（文档
.getElementById（“仪表板”）
.bind（[tagDivPicker]，[table_data]）
.绘制（数据表）；
google.visualization.events.addListener（表_数据'ready'，函数（）{
变量颜色={
安全：“绿色”，不安全：“红色”
};
var pieColors=[]；
var dataGroupColumnChart=google.visualization.data.group(
表_data.getDataTable（），[1][{
专栏：1，
聚合：google.visualization.data.count，
键入：“数字”
}]);
对于（var i=0；i