Chartjs 画个饼图

下载地址

chartjs

界面引用

<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