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>