fusioncharts插件的从数据库拿数据到页面展示

wJulio

于 2018-05-31 13:11:20 发布

阅读量655

点赞数

分类专栏：图表插件文章标签： fusioncharts

本文链接：https://blog.csdn.net/wJulio/article/details/80522624

版权

图表插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实体类

package entity;

import org.springframework.format.annotation.DateTimeFormat;

import java.io.Serializable;
import java.util.Date;

/**
* author:wangzhongzhong
* time: 2018/3/6
*/
public class Chart implements Serializable {

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    private Integer id;

    @DateTimeFormat(pattern = "YYYY-MM-DD")
    private String createDate;

    private Integer count;

    public Chart(String date, Integer count) {
        this.createDate = date;
        this.count = count;
    }

    public Chart() {
    }

    public String getDate() {
        return createDate;
    }

    public Integer getCount() {
        return count;
    }

    public void setDate(String date) {
        this.createDate = date;
    }

    public void setCount(Integer count) {
        this.count = count;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (!(o instanceof Chart)) return false;

        Chart chart = (Chart) o;

        return getId() != null ? getId().equals(chart.getId()) : chart.getId() == null;
    }

    @Override
    public int hashCode() {
        return getId() != null ? getId().hashCode() : 0;
    }

    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("Chart{");
        sb.append("id=").append(id);
        sb.append(", date=").append(createDate);
        sb.append(", count=").append(count);
        sb.append('}');
        return sb.toString();
    }

}

持久层:

mapper.xml:

mapper.java:

package mapper;

import entity.Chart;

import java.util.List;

/**
* author:wangzhongzhong
* time: 2018/3/6
*/
public interface ChartMapper {

List<Chart> findChartCount();
}

业务层:

package service;

import entity.Chart;
import mapper.ChartMapper;
import org.springframework.stereotype.Service;

import java.util.List;

/**
* author:wangzhongzhong
* time: 2018/3/6
*/
public interface ChartService {

    List<Chart> findCountChart();

}

package service.impl;

import entity.Chart;
import mapper.ChartMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import service.ChartService;

import java.util.List;

/**
* author:wangzhongzhong
* time: 2018/3/6
*/
@Service
public class ChartServiceImpl implements ChartService {

    @Autowired
    private ChartMapper chartMapper;

    @Override
    public List<Chart> findCountChart() {
        return chartMapper.findChartCount();
    }
}

控制层：

package controller;

import entity.Chart;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import service.ChartService;

import java.util.List;

/**
* author:wangzhongzhong
* time: 2018/3/6
*/
@Controller
public class ChartController {

    @Autowired
    private ChartService chartService;

    @RequestMapping("/getChart.json")
    public @ResponseBody String getChart(){

        List<Chart> list = chartService.findCountChart();

        String string = "";

        for(int i=0;i<list.size();i++){
            string += "{";
            //这个是为了拼接我们的json字符串，符合我们前端的json对象
            string += "\"label\":"+ "\""+list.get(i).getDate().split(" ")[0]+"\","+"\"value\":"+"\""+list.get(i).getCount()+"\"";
            if(i == list.size()-1){
                string +="}";
            }else{
                string +="},";
            }

        }

        return "["+string+"]";
    }

}

页面的展示:

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="${pageContext.request.contextPath}/fusioncharts-suite-xt/js/fusioncharts.charts.js"></script>
    <script src="${pageContext.request.contextPath}/fusioncharts-suite-xt/js/fusioncharts.js"></script>

    <title>Title</title>
</head>
<body οnlοad="load()">
    <div id="chartContainer">条形图</div>

    <script>

            function load() {
                $.ajax({
                    type: "POST",
                    contentType : 'application/json',
                    processData : false,
                    dataType : 'json',
                    url:"${pageContext.request.contextPath}/getChart.json",
                    success:function (msg) {
                        FusionCharts.ready(function(){
                            var revenueChart = new FusionCharts({
                                "type":"column3d",
                                "renderAt":"chartContainer",
                                "width":"700",
                                "height":"300",
                                "dataFormat":"json",
                                "dataSource":{
                                    "chart": {
                                        "caption": "每个月份的订单数量",
                                        "xAxisName": "日期",
                                        "yAxisName": "数量(个)",
                                        "theme": "fint"
                                    },
                                    "data": msg
                                }
                            });
                            revenueChart.render();
                        });

                                }
                            }
                            );
            }
    </script>

</body>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
</html>