项目中报表业务开发，个人使用c3.js插件，简单案例应用

由于c3.js 是基于D3.js,项目中引用js

<script type="text/javascript" src="${ctxStatic}/c3-master/d3-4.13.0.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctxStatic}/c3-master/c3.min.js"></script>

项目业务需求，分段统计学生分数：

<div class="main-content-right">
    <div class="xueyuanwd-head" style="position: relative;">
        <p>成绩报表</p>
    </div>
    <div class="timu-search" style="margin-left: 37px;height:45px;line-height:0px;">
        <form id="searchForm" modelAttribute="RStuScore" action="${ctx}/stuscore/rStuScore/export" method="post">
            <input id="stuTestId" name="stuTestId" value="${rStuTest.id}" type="text" style="display: none;">
            <input id="subScore" name="subScore" value="${rStuTest.subScore}" type="text" style="display: none;">
            按分数段统计：<input class="search-input-03" id="scorePart" name="scorePart" placeholder="分档分数" value="10"
                          onkeyup="value=value.replace(/[^\-?\d]/g,'')"/>
            <input type="button" class="search-btn-01" value="查询" onclick="countScorePartList()"/>
        </form>
    </div>
    <div id="score_chart"></div>
</div>

1.通过饼状图展示：

js代码如下：

function countScorePartList() {
        $.ajax({
            url: "${ctx}/stuscore/rStuScore/countStuByScore",
            data: {
                "scorePart": $("#scorePart").val(),
                "subScore": '${rStuTest.subScore}',
                "stuTestId": '${rStuTest.id}'
            },
            type: "post",
            dataType: 'json',
            success: function (data) {
                //饼状图
                var jsonData = {};
                var sites = [];
                data.forEach(function (e) {
                    sites.push(e.xDataPart);
                    jsonData[e.xDataPart] = e.countData;
                });
                var chart = c3.generate({
                    bindto: '#score_chart',
                    data: {
                        json: [jsonData],
                        keys: {
                            value: sites
                        },
//                        type:'pie'
                        type: 'donut'
                    },
                    donut: {
                        title: '${rStuTest.testTitle}'
                    }
                });

   }

    })
}

2.通过折线图展示：

js代码如下：

    function countScorePartList() {
        $.ajax({
            url: "${ctx}/stuscore/rStuScore/countStuByScore",
            data: {
                "scorePart": $("#scorePart").val(),
                "subScore": '${rStuTest.subScore}',
                "stuTestId": '${rStuTest.id}'
            },
            type: "post",
            dataType: 'json',
            success: function (data) {
              // 线形图
                var modData1 = [];
                var modData2 = [];
                modData1[0]='x';
                modData2[0] ="人数";
                data.forEach(function(d, i) {
                    var item1 = d.xDataPart;
                    var item2 = d.countData;
                    modData1[i+1]=item1;
                    modData2[i+1]=item2;
                });
                var chart = c3.generate({
                    title: {
                        show: true,
                        text: '${rStuTest.testTitle}',
                        position: 'top-center',   // top-left, top-center and top-right
                        padding: {
                            top: 20,
                            right: 20,
                            bottom: 40,
                            left: 50
                        }
                    },
                    bindto: '#score_chart',
                    data: {
                        x: 'x',
                    //    type: 'bar', //柱形图
                        type: 'line',//折线图
                        columns: [
                            modData1,
                            modData2
                        ]
                    },
                    axis: {
                        x: {
                            type: 'category',
                            categories: modData1

                        }
                    }
                });

            }

        })
    }

3.通过饼状图展示（js代码和折线图一致，只是type：'bar'）：

 

备注：其中 xDataPart 指的是分数段区间，countData 指的是分数段区间统计人数， y轴数据c3.js自适应配置，暂不考虑。