java通过AmCharts生成条形图

该博客介绍了一个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

xml <!-- [xml] (xml / csv) 数据类型xml/csv--> ; <!-- 如果使用csv作为数据的话,需要使用这个属性;表示文件数据分隔符,(平常以";"和","为主) [;] (string) csv file data separator (you need it only if you are using csv file for your data) --> 1 <!-- 如果使用的是csv数据,可以设置跳过几行再显示数据,默认为0表示csv中的数据全部显示,大于n(n>0);表示前面n行都不显示[0] (Number) if you are using csv data type, you can set the number of rows which should be skipped here --> <!-- 设置系统中的字体[Arial] (font name) use device fonts, such as Arial, Times New Roman, Tahoma, Verdana... --> <!-- 设置所有文本的大小,默认为11,具体的文本的字体大小也可以在下面的设置中设置[11] (Number) text size of all texts. Every text size can be set individually in the settings below --> <!-- 同上[#000000] (hex color code) main text color. Every text color can be set individually in the settings below--> . <!-- 小数分隔符,默认为[,]注:该属性只是用来显示,而在csv数据文件中,必须使用[.] (string) decimal separator. Note, that this is for displaying data only. Decimals in data xml file must be separated with a dot --> <!-- 千位分隔符,默认为空[ ] (string) thousand separator. use "none" if you don't want to separate --> 3 <!-- 如果百分数格式的数字,后面的小数位小于该属性的值,则在小数后面加0补充。如54.2%,该属性设置为3,那么显示的效果为54.200%。[] (Number) if your value has less digits after decimal then is set here, zeroes will be added --> <!--设置科学记数法的最小值 [0.000001] If absolute value of your number is equal or less then scientific_min, this number will be form
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值