在线客服的客服工单统计界面-highchart开发曲线图

这里简单介绍下在在线客服领域后台客服统计功能里面用开源js报表工具highchart开发曲线图。

首先下载最新版本的highchart源码：

这里用的是highchart v6.0.7。

然后Js引入：

    <script type="text/javascript" src="/js/highchart/highcharts.js" charset="utf-8"></script>

接下来后台准备动态数据：

这里是一天的客服工单数据：

private List<Integer> currentOnserviceCustomerCountList;

private List<Integer> onWaitCustomerCountList;

private List<Integer> sumWorkOrderCountList;

private List<Integer> notAcceptWorkOrderCountList;

controller 把对应数据放入model中 

前台freemarker显示数据：

js代码：

$(function () {

    var series=new Array();

    var currentOnserviceCustomerCountArray= new Array();

    <#list enterpriseMainBean.currentOnserviceCustomerCountList as node> 

    currentOnserviceCustomerCountArray.push(${node});

    </#list>

    currentOnserviceCustomerCountObject= {

        name: '服务中',

        data: currentOnserviceCustomerCountArray

    }

    series.push(currentOnserviceCustomerCountObject);

    

     var onWaitCustomerCountArray= new Array();

    <#list enterpriseMainBean.onWaitCustomerCountList as node> 

    onWaitCustomerCountArray.push(${node});

    </#list>

    onWaitCustomerCountObject= {

        name: '等待中',

        data: onWaitCustomerCountArray

    }

    series.push(onWaitCustomerCountObject);

    

     var sumWorkOrderCountArray= new Array();

    <#list enterpriseMainBean.sumWorkOrderCountList as node> 

    sumWorkOrderCountArray.push(${node});

    </#list>

    sumWorkOrderCountObject= {

        name: '总工单数',

        data: sumWorkOrderCountArray

    }

    series.push(sumWorkOrderCountObject);

    

     var notAcceptWorkOrderCountArray= new Array();

    <#list enterpriseMainBean.notAcceptWorkOrderCountList as node> 

    notAcceptWorkOrderCountArray.push(${node});

    </#list>

    notAcceptWorkOrderCountObject= {

        name: '未接待',

        data: notAcceptWorkOrderCountArray

    }

    series.push(notAcceptWorkOrderCountObject);

    

    Highcharts.chart('workOrderChart', {

    title: {

        text: '全天服务动态图'

    },

    subtitle: {

        text: ''

    },

    yAxis: {

        title: {

            text: '工单数'

        }

    },

    legend: {

        layout: 'vertical',

        align: 'right',

        verticalAlign: 'middle'

    },

    plotOptions: {

        series: {

            label: {

                connectorAllowed: false

            },

            pointStart: 1

        }

    },

    series: series,

    responsive: {

        rules: [{

            condition: {

                maxWidth: 500

            },

            chartOptions: {

                legend: {

                    layout: 'horizontal',

                    align: 'center',

                    verticalAlign: 'bottom'

                }

            }

        }]

    }

});

});

html：加入报表的div

  <div class="panel-body">

                            <div id="workOrderChart"></div>

                        </div>