java通过AmCharts生成条形图

最新推荐文章于 2019-07-26 17:49:16 发布

原创最新推荐文章于 2019-07-26 17:49:16 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

Java通过Amcharts生成图表专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了一个SSM项目的实现过程。首先创建数据库及房间表和房间类型表，接着搭建SSM环境。项目需求是根据房间类型显示房间总数和可入住房间数量的条形图，详细说明了项目结构，包括引入外部文件、编写实体类、dao层、service层、controller层及页面代码，还提供了源码下载地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建数据库，创建表(房间表 room和房间类型表 roomtype)

具体语句附在项目源码中。

2、创建web项目，搭建ssm环境（最后附上项目下载地址）

需求：根据房间类型显示房间总数和可入住的房间数量的条形图；

效果展示：

具体实现,项目结构如下：

1、引入外部文件，在webapp目录下导入js和charts文件。编写各个表对象的实体类。

2、编写封装了条形图信息的实体类：

package com.scce.pojo;

/**
 * @program: IdeaProjects
 * @description:
 * @author: Lxy
 * @create: 2019-06-07 11:06
 **/
//封装条形图所需信息
public class Roomchart {

    //房间类型
    private String roomtypestr;

    //房间数量
    private Integer roomNum;

    //可入住房间数量
    private Integer InRoomNum;

    public String getRoomtypestr() {
        return roomtypestr;
    }

    public void setRoomtypestr(String roomtypestr) {
        this.roomtypestr = roomtypestr;
    }

    public Integer getRoomNum() {
        return roomNum;
    }

    public void setRoomNum(Integer roomNum) {
        this.roomNum = roomNum;
    }

    public Integer getInRoomNum() {
        return InRoomNum;
    }

    public void setInRoomNum(Integer inRoomNum) {
        InRoomNum = inRoomNum;
    }

    @Override
    public String toString() {
        return "Roomchart{" +
                "roomtypestr='" + roomtypestr + '\'' +
                ", roomNum=" + roomNum +
                ", InRoomNum=" + InRoomNum +
                '}';
    }
}

3、编写dao层，RoomDao和RoomTypeDao

package com.scce.dao;
import org.apache.ibatis.annotations.Select;

//客房管理
public interface RoomDao {
    //查询每种房间类型数量（Lxy）
    @Select("select count(1) from room where roomType=#{roomType}")
    public Integer getRoomNum(Integer roomType);

    //查询每种房间类型可入住房间数量（Lxy）
    @Select("select count(1) from room  where status=1 and roomType=#{roomType}")
    public Integer getInRoomNum(Integer roomType);

}

package com.scce.dao;

import com.scce.pojo.RoomType;
import org.apache.ibatis.annotations.Select;

import java.util.List;

//客房管理
public interface RoomTypeDao {
    //查询房间类型
    @Select("select * from roomtype")
    public List<RoomType> getRoomType();

}

4、编写service层，RoomService和RoomTypeService以及它们的实现类：

package com.scce.service;

//客房管理
public interface RoomService {
    //查询每种房间类型数量
    public Integer getRoomNum(Integer roomType);
    //查询每种房间类型可入住房间数量
    public Integer getInRoomNum(Integer roomType);
}

package com.scce.service.impl;

;
import com.scce.dao.RoomDao;

import com.scce.service.RoomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class RoomServiceImpl implements RoomService {
    @Autowired
    private RoomDao roomDao;

    //根据房间类型查询房间数量
    @Override
    public Integer getRoomNum(Integer roomType) {
        Integer roomNum = roomDao.getRoomNum(roomType);
        System.out.println(roomNum);
        return roomNum;
    }

    //根据房间类型查询可入住房间数量
    @Override
    public Integer getInRoomNum(Integer roomType) {
        Integer inRoomNum = roomDao.getInRoomNum(roomType);
        System.out.println(inRoomNum);
        return inRoomNum;
    }


}

package com.scce.service;

import com.scce.pojo.RoomType;

import java.util.List;

//客房管理
public interface RoomTypeService {
    //查询所有房间类型信息
    public List<RoomType> getAllRoomType()throws Exception;

}

package com.scce.service.impl;

import com.scce.dao.RoomTypeDao;
import com.scce.pojo.RoomType;
import com.scce.service.RoomTypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class RoomTypeServiceImpl implements RoomTypeService{

    @Autowired
    private RoomTypeDao roomTypeDao;

    //查询所有房间类型信息
    public List<RoomType> getAllRoomType() {
        List<RoomType> roomTypeList = roomTypeDao.getRoomType();
        return roomTypeList;
    }
}

5、编写controller层，RoomController

package com.scce.controller;

import com.scce.pojo.RoomType;
import com.scce.pojo.Roomchart;
import com.scce.service.RoomService;
import com.scce.service.RoomTypeService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/room")
public class RoomController {
    @Autowired
    private RoomService roomService;
    @Autowired
    private RoomTypeService roomTypeService;


    //roomchart条形图，根据房间类型显示房间总数和可入住的房间数量
    @RequestMapping("/getRoomNum")
    public List<Roomchart> getRoomNum() throws Exception {
        //创建集合，存放条形图显示所需数据
        List<Roomchart> list = new ArrayList<Roomchart>();
        //查询出所有房间类型
        List<RoomType> roomTypeList = roomTypeService.getAllRoomType();
        System.out.println(roomTypeList);
        try {
            //遍历房间类型
            for (RoomType roomType : roomTypeList) {
                //根据房间类型查询房间数量
                Integer roomNum = roomService.getRoomNum(roomType.getId());
                //根据房间类型查询可入住房间数量
                Integer inRoomNum = roomService.getInRoomNum(roomType.getId());
                //把数据封装到实体类中
                Roomchart roomchart = new Roomchart();
                roomchart.setRoomNum(roomNum);
                roomchart.setInRoomNum(inRoomNum);
                roomchart.setRoomtypestr(roomType.getType());
                //将对象放入集合
                list.add(roomchart);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }
}

6、页面代码，AmSerialChart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条形图</title>
    <link rel="stylesheet" href="../charts/style.css" type="text/css"/>
    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../charts/amcharts.js"></script>
<script type="text/javascript" src="../charts/pie.js"></script>
<script type="text/javascript" src="../charts/serial.js"></script>
</head>
<script>
    //AmSerialChart.html
    var chart;
    var chartData ;
    AmCharts.ready(function () {
        $.getJSON("../room/getRoomNum",null,function(data){
            console.log(data);
            chart = new AmCharts.AmSerialChart();   //条形图
            chart.dataProvider =data; //获取数据
            chart.categoryField = "roomtypestr"; //横坐标
            chart.fontSize = 12;  //标题大小
            chart.startDuration = 1;//动画
            chart.plotAreaBorderColor = "#DADADA"; //绘图区域边框颜色
            chart.plotAreaBorderAlpha = 1; //绘图区域边框透明度

            chart.rotate = true; //图像是否xy轴互换，默认为false，如果想让图像顺时针旋转90°，则设置为true

            var categoryAxis = chart.categoryAxis; // categoryAxis（图表线，相当于X轴）
            categoryAxis.gridPosition = "start";   //网格位置
            categoryAxis.gridColor = "#000000"; //网格线颜色
            categoryAxis.axisColor = "#000000";  //横坐标轴颜色
            categoryAxis.gridAlpha = 0.1;//网格线透明度
            categoryAxis.axisAlpha = 0; //坐标轴透明度
            
            var valueAxis = new AmCharts.ValueAxis();//纵坐标轴
            valueAxis.axisAlpha = 0;//坐标轴透明度
            valueAxis.gridAlpha = 0.1;//网格线透明度
            valueAxis.position = "top"; //轴的位置，默认在左侧
            chart.addValueAxis(valueAxis);//添加Y轴。可以添加多个
            
            var graph1 = new AmCharts.AmGraph();//图像对象，必须有该属性
            graph1.type = "column"; //图像类型，有line、column、smoothedLine类型，第一种为线形图，第二种为柱状图
            graph1.title = "房间数量";   //定义图形视图标题
            graph1.valueField = "roomNum"; //指定一个字段作为Y坐标值
            graph1.balloonText = "roomNum:[[value]]"; //节点显示的文本内容
            graph1.lineAlpha = 0;
            graph1.fillColors = "#ADD981";//填充区颜色
            graph1.fillAlphas = 1; //填充区透明度，默认为0，最大值为1，当设置值时，在线条跟x轴之间的区域会填充颜色
            chart.addGraph(graph1);//添加一个图形，可以添加多个，想要绘制图形，必须有此方法
            
            var graph2 = new AmCharts.AmGraph();
            graph2.type = "column";
            graph2.title = "可入住房间数量";
            graph2.valueField = "inRoomNum";
            graph2.balloonText = "inRoomNum:[[value]]";
            graph2.lineAlpha = 0;
            graph2.fillColors = "#81acd9";
            graph2.fillAlphas = 1;
            chart.addGraph(graph2);

            //创建legend对象，在图表的上方或者下方显示图例，图例的颜色就是对应线条的颜色
            var legend = new AmCharts.AmLegend();
            chart.addLegend(legend); //添加图例，可以添加多个
            chart.creditsPosition = "top-right";
            chart.write("chartdiv");  //将amcharts对象写到一个div中，最常用方法
        });
    });
</script>
<body>
<div id="chartdiv"  style="height:600px;width:900px;float: left;"></div>
</body>
</html>

源码：https://github.com/LuoXuYang1997/AmCharts.git