chartJS+ajax+ssm简单整合

最新推荐文章于 2024-05-31 06:57:39 发布

藤原~拓海

最新推荐文章于 2024-05-31 06:57:39 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： chartJS ajax ssm

本文链接：https://blog.csdn.net/quanjiao4514/article/details/78460097

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先是chartJs的使用入门

chartJs依赖于jquery,所以要引入两个js,这里使用CDN节点

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/Chart.js/2.7.0/Chart.js"></script>

在这里说明下我遇到的坑,之前用chartJs是看的某个中文文档,可能是我不怎么会用，我用上面的说明死活创建不出来图表,后来找到了英文的api成功创建出来图表,看网上说chartJs有1.x和2.x两个版本,使用上有所不同,在这里我肯定用的是最新的版本。

下面说下chartJs饼状图简单ajax联动使用。

首先在body里面定义一个div文本框

<body>

<div style="width:40%;height: 40%;float: left;">

</body>

然后写js,因为获取动态数据,所以这里采用ajax联动

<script type="text/javascript">
    var jsonData = $.ajax({
        url: 'getChartPie.do',//请求springmvc的地址
        dataType: 'json',//返回格式json
    }).done(function (results) { //当ajax成功请求时返回results
        // 将获取到的json数据分别存放到两个数组中
        var labels = [], data=[];//labels代表的是饼状图的元素,就是标题,data代表对应元素的数值,这里从后台传过来
        for(var monthrecord in results)
        {
         // 遍历json字符串,将json字符串插入到新建的两个数组中,填充饼状的数据


            labels.push(results[monthrecord].month);
            data.push(parseInt(results[monthrecord].totalmoney));
        }
        // 设置饼图表的数据
        var Tempdata = {
            labels: labels,//饼状图元素
            datasets: [{
                data: data,//alax获取到的后台数据
                backgroundColor:["FF6666","lightgreen","#FFCCCC","#99CCCC","#0099CC","#CCCCFF","#FFCC33","CCFFFF","#006633","#99CC00","336633","lightblue"]  //对应data数据的颜色,和背景色一一对应
            }],
        }
        var ctx = $("#myChart").get(0).getContext("2d");初始化chartJS,这里采用的是jquery方式初始化
        var myLineChart = new Chart(ctx, { //填充图表参数，格式为ctx，{这里面包含type类型，data，还有option}，这点刚开始照网上的中文文档初始化，图表都没有出来，查询的英文api是这样初始化的成功了

            type: 'doughnut',//类型是doughnut


            data: Tempdata, //这里数据包含元素名称，元素数据，以及背景色等数据源
            options: {   //这里设置标题，js事件，比如鼠标悬停，点击等，都在这里options里面设置，格式就是{类型：数值}，详情请参看英文api
                title: {
                    display: true,
                    text: '点餐金额(元)统计',
                    fontSize:20,
                    fontFamily: 'SimHei',
                },
            }
        });
    });
</script>

至此我们的前端页面就写好了，是不是很简单的。接下来简单说下ssm怎么实现的，下面的就更简单了。

javabean（包含月份，和要填充的数据totalmoney）

private String month;
private Integer totalmoney;


public ChartPie(){
    super();
}
public ChartPie(String month, Integer totalmoney) {
    this.month = month;
    this.totalmoney = totalmoney;
}

public String getMonth() {
    return month;
}

public void setMonth(String month) {
    this.month = month;
}

public Integer getTotalmoney() {
    return totalmoney;
}

public void setTotalmoney(Integer totalmoney) {
    this.totalmoney = totalmoney;
}

@Override
public String toString() {
    return "ChartPie{" +
            "month='" + month + '\'' +
            ", totalmoney='" + totalmoney + '\'' +
            '}';
}

springmvc层

@RequestMapping(value = {"/getChartPie.do"} )
@ResponseBody
public List<ChartPie> getNumber(){
   return foodControlService.getNumber();
}

service层

public List<ChartPie> getNumber(){
   List<ChartPie> list = new ArrayList<ChartPie>();
   List<ChartPie> hasMonths = iUserDao.selectHasMonth();
   if(hasMonths != null && hasMonths.size()>0){
      for(ChartPie c : hasMonths){
         ChartPie chartPie = new ChartPie(c.getMonth(), 20*iUserDao.getMonthTotalNumber(c.getMonth()));
         list.add(chartPie);

      }
   }
   return list;
}

mybatis

List<ChartPie> selectHasMonth();

mybatis-xml文件

<select id="selectHasMonth"  resultType="cn.myzf.odao.order.bean.ChartPie">

    SELECT  DISTINCT (month)  FROM (SELECT SUBSTRING(createtime,1,7) month FROM listorderinfo) AS a
</select>

至此后端返回一个chartpie实体类的list的json字符串，传入前端，就可以完成数据的填充了。是不是非常的简单，下面是效果图。