数据库数据图表化

最新推荐文章于 2024-06-27 01:12:42 发布

dream.未来

最新推荐文章于 2024-06-27 01:12:42 发布

阅读量1.1k

点赞数

分类专栏：项目小功能点

本文链接：https://blog.csdn.net/weixin_52296931/article/details/115012174

版权

项目小功能点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.引入对应的js文件 highchars.js

2.创建一个jsp页面，里面就是有关于我们图标的设计

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${BaseContext}">
    <title>展示视频播放次数图表</title>
    <%--第一步引入highCharts文件--%>
    <%--BaseContext 路径 http://localhost:8080/day74_video/--%>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/js/highcharts.js"></script>

</head>
<body>

      <jsp:include page="../header.jsp">
          <jsp:param name="state" value="fromJsp"/>
      </jsp:include>

      <%--第二步： 准备一个HighCharts DOM容器--%>
      <div class="container">
          <div class="jumbotron">
              <h2>统计 - 统计分析</h2>
          </div>
          <div class="row">
              <div id="container" style="min-width:400px;height:400px"></div>
          </div>

          <div class="row">
              <button onclick="ajaxLoadData();">ajax加载图表</button>
              <div id="ajaxContainer" style="min-width:400px;height:400px"></div>
          </div>
      </div>

     <script>
         //第三步： 准备highCharts配置项
         var options = {
            // 设定图表的类型
            chart:{
                type:'column' // 柱状图
            },
            // 正标题
            title:{
                text:"课程平均播放次数"
            },
            // 副标题
            subtitle:{
                text: "数据来源：zhiyou100.com"
            },
            //x轴数据
            xAxis:{
                // x轴水平方向的值 数据应该从后台传输过来  支持el表达式  xData = ["web前端入门开发","前端开发与Git入门","","",""....]
                // categories 分类，类别
                categories:${xData},// ["web前端入门开发","前端开发与Git入门","","",""....]
                // 十字准星线，默认值为false
                crosshair: true
            },
            // y轴数据
            yAxis:{
                // 坐标轴的最小值，当为 null 是最小值将自动计算。
                min: 0,
                // y轴的标题
                title: {
                    text: '平均播放次数(times)'
                }
            },
            //tooltip:数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据
            tooltip:{
                // head + 每个 point + footer 拼接成完整的 table
                //headerFormat 提示框中标题行的HTML代码。变量用花括号包起来。
                // 可用的变量有 point.key，series.name，series.color 以及point 和series对象的其他属性。
                // 坐标轴类型的不同，point.key变量类型可能为类别名称，
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                //数据点格式化字符串 提示框中该点的HTML代码。 变量用花括号括起来。
                // 可选变量有 point.x，point.y，series.name 和series.color 以及以相同的形式表示的其它属性
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    // point.y:.1f  保留数值后的第一位小数
                    // toFixed(2)   保留两位小数
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                // 尾部格式化字符串
                footerFormat: '</table>',
                //当提示框被共享时，整个绘图区都将捕捉鼠标指针的移动。
                // 提示框文本显示有序数据（不包括饼图，散点图和标志图等）的系列类型将被显示在同一个提示框中。
                shared: true,
                // 是否使用HTML代码渲染提示框的内容 true 按照html代码进行渲染
                useHTML: true
            },

            //数据列的配置
            plotOptions: {
                 //column ---> 柱状图
                 column: {
                     // 柱状图之间的间距 默认值为0.1
                     pointPadding:0.2,
                     // 边框宽度 默认值为1
                     borderWidth: 0
                 }
            },
             //数据列 data = [{name:'平均播放次数'}]
             series:[{
                 //name 该系列的名称 图表底部的名称值
                 name: '平均播放次数',
                 // data值应该从数据库中查询出来的
                 // data指的是该系列数据点数组 纵轴单位会自动根据值进行计算
                 //[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                 // 水平轴类别名称对应的值 动态变化
                 data:${yData}// [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
             }]
         }
         // 第四步： 图表初始化函数 第一个参数是容器的id值 第二个参数是配置信息
         var chart = Highcharts.chart('container', options);
     </script>
</body>
</html>

3.创建controller层,当我们点击统计的时候就跳转到这一层来,我们在这里面要注意一下我们需要把查询出来的数据存在map集合里面,才能实现一个下标对以一个数据,不至于出现混乱,然后再用两个集合来获得map集合2中的key值后value值,这里面就使用到了stringBuffer的append方法目的是追加子字符串,因为jsp页面那边需要的是一个包含所有数据的字符串,最后通过model.Aturibute方法把我们的存到model域之中,最后通过返回把我们数据传输到我们的jsp页面里面

@Controller
@RequestMapping("/admin/state")
public class StateController {

    // 属性注入 service层对象
    @Autowired
    private VideoService videoService;// 假定已经有了

    @RequestMapping("/courseavg.do")
    // 需要往前端传输 xData = ["Web前端入门小项目","前端开发与Git入门","每天20分钟轻松入门React","UI基础入门","Python编程零基础入门","轻松进击PHP基础"]
    //             yData = [129,190,........]
    public String courseAvg(Model model){
        // 使用Video
        List<HashMap> list = videoService.queryVideoPlayTimes();
        System.out.println("统计结果为： " + list);
        // 准备xData 和 yData 的值

        // 准备两个list集合 分别取出对应的x轴需要的数据和y轴需要的数据
        ArrayList<Object> xList = new ArrayList<>();
        ArrayList<Object> yList = new ArrayList<>();

        // 遍历HashMap中的值
        for (HashMap map : list) {
            xList.add(map.get("course_name").toString());//这里就是获得数据库数据，放在图标底部
            yList.add(Integer.parseInt(map.get("avgTimes").toString()));//这里获得数据库数据，作为图标值得高度
        }

        StringBuffer xData = new StringBuffer();
        // 拼装xData数据
        // ["Web前端入门小项目","前端开发与Git入门","每天20分钟轻松入门React","UI基础入门","Python编程零基础入门","轻松进击PHP基础"]
        // 拼装yData数据
        // 拼装yData数据   yData = [129,190,........]
        StringBuffer yData = new StringBuffer();
        xData.append("[");
        yData.append("[");
        for (int i = 0; i < xList.size(); i++) {
            if (i == 0) {
                xData.append("'" + xList.get(i) + "'");
                yData.append("" + yList.get(i) + "");
            } else{
                xData.append(",'" + xList.get(i) + "'");
                yData.append("," + yList.get(i) + "");
            }
        }
        xData.append("]");
        yData.append("]");
        System.out.println(xData);
        System.out.println(yData);
        // 传输到页面上  回传数据
        model.addAttribute("xData", xData);
        model.addAttribute("yData", yData);
        // 先设定跳转的页面
        return "admin/analysis/show"; // 展示统计的播放次数
    }

}

4.创建swervice 以及serviceImpl mapper以及Mapper的接口,目的是形成一个结构框架,

//service接口
public interface VideoService {

    // 统计各课程的播放次数
    List<HashMap> queryVideoPlayTimes();
}


//service接口实现类
@Service
public class VideoServiceImpl implements VideoService {

    @Autowired
    private VideoMapper mapper;

    @Override
    public List<HashMap> queryVideoPlayTimes() {
        return mapper.queryVideoPlayTimes();
    }
}



//mapper接口
public interface VideoMapper {

    // 统计各课程的播放次数
    List<HashMap> queryVideoPlayTimes();

}

mapper接口由于mybatyis框架的缘故并不是使用实现类来完成的,而是使用mapper.xml配置文件来实现的

<!--  napper.xml接口代码 -->
<!--映射对应的接口文件-->
<mapper namespace="com.zhiyou.video.mapper.VideoMapper">

    <!--List<HashMap> queryVideoPlayTimes();-->
    <!-- 查询视频的播放次数  科目表不需要
         video course
         平均播放次数
    -->
    <select id="queryVideoPlayTimes" resultType="java.util.HashMap">
        select course_id,course_name,round(avg(v.video_play_times)) as avgTimes from video v,course c where v.course_id = c.id
        group by v.course_id,c.course_name
    </select>

</mapper>