美文网首页
Chartjs 画个饼图

Chartjs 画个饼图

作者: 十九贝勒 | 来源:发表于2018-06-01 17:56 被阅读180次

    下载地址

    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

    相关文章

      网友评论

          本文标题:Chartjs 画个饼图

          本文链接:https://www.haomeiwen.com/subject/xupksftx.html