下載地址
界面引用
<script type="text/javascript" src="Chart.min.js"></script>
sql語句
select platform_name,count(id) from platform_user
group by platform_name;
組裝餅圖數(shù)據(jù)
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};
界面設(shè)置
<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咳燕、效果圖