下载地址
界面引用
<script type="text/javascript" src="Chart.min.js"></script>
sql语句
select platform_name,count(id) from platform_user
group by platform_name;
组装饼图数据
List nameList = result.stream()
.map(Pie::getName)
.collect(Collectors.toList()), countList = result.stream()
.map(Pie::getCount)
.collect(Collectors.toList());
Object[] arrayResult=new Object[]{nameList,countList};
界面设置
<canvas id="chart-hy"></canvas>
JS代码画饼图
function initPie(names,datas,id,typeName,title){
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var config = {
type: 'pie',
data: {
datasets: [{
data: datas,
backgroundColor: [
window.chartColors.red,
window.chartColors.blue
],
label: typeName
}
],
labels: names
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: title
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
var ctx = document.getElementById(id).getContext('2d');
window.myPie = new Chart(ctx, config);
}
7、效果图
TIM图片20180601172838.png
