highChsrts的shiyon

yunfei_run

于 2017-11-23 23:20:23 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39709686/article/details/78620158

本文介绍如何使用Highcharts库创建折线图和柱状图，并展示了从后台获取数据并将其应用于图表的具体实现方法。

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

Highcharts ：折线图、区域图、柱状图、饼状图 …

下边仅以折线图和柱状图演示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>折线图</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/highcharts/highcharts.js"></script>
<script type="text/javascript"
	src="../js/highcharts/modules/exporting.js"></script>
<script type="text/javascript"
	src="../js/highcharts/highcharts-zh_CN.js"></script>
</head>
<script type="text/javascript">
	$(function() {  //先发异步请求拿到数据
		$.post("../hcharts_courier.action", {}, function(data) {
			$('#container').highcharts({ //调用主函数
				title : { //主标题
					text : '各分公司快递员人数统计表',
					align : 'center' //对齐方式,默认居中对齐
				},
				subtitle : { //子标题
					text : '数据来源:BOS',
					align : 'center' //对齐方式
				},
				exporting : {
					enabled : false //是否显示‘打印’,'导出'等功能按钮，默认为显示
				},
				xAxis : { //x坐标轴
					categories : data.categories
				},
				yAxis : { //y坐标轴
					title : {
						text : '人数'
					}
				},
				tooltip : { //数据提示框
					valueSuffix : '个人'
				},
				legend : { //图例
					enabled:false
				},
				series : [ {  //数据内容
					name : '总人数',
					data : data.series
				} ]
			});
		});
	});
</script>
<body>
	<div id="container"
		style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

</html>

2.柱状图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>柱状图</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/highcharts/highcharts.js"></script>
<script type="text/javascript"
	src="../js/highcharts/modules/exporting.js"></script>
<script type="text/javascript"
	src="../js/highcharts/highcharts-zh_CN.js"></script>
</head>
<script type="text/javascript">
	$(function() {
		$.post("../hcharts_courier.action", {}, function(data) {
			//{"categories":["河南分公司","上海分公司"...],"series":[50,30...]}
			$('#container').highcharts({ //调用主函数
				chart : { //图表类型
					type : 'column' //柱状图,默认为折线图
				},
				title : { //主标题
					text : '各分公司快递员人数统计表',
					align : 'center' //对齐方式,默认居中对齐
				},
				subtitle : { //子标题
					text : '数据来源:BOS',
					align : 'center' //对齐方式
				},
				xAxis : { //x坐标轴
					categories : data.categories
				},
				yAxis : { //y坐标
					title : {
						text : '人数'
					}
				},
				legend : { //图例
					enabled : false
				},
				tooltip : { //数据提示框
					valueSuffix : '个人'
				},
				series : [ {  //数据内容
					name : '总人数',
					data : data.series
				} ]
			});
		});
	});
</script>

<body>
	<div id="container"
		style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

</html>

3.Action

package cn.itcast.bos.action.report;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

import cn.itcast.bos.service.base.CourierService;

@ParentPackage("json-default")
@Namespace("/")
@Controller
@Scope("prototype")
public class HighChartsAction extends ActionSupport {
	@Autowired
	private CourierService courierService;

	@Action(value = "hcharts_couriers", results = { @Result(name = "success", type = "json") })
	public String hchartsCourier() {
		// [['河南分公司',50],['上海分公司',30],...]
		List<Object[]> list = courierService.findCourierByGroup();
		List<String> categories=new ArrayList<>();//['河南分公司','上海分公司',...]
		List<Long> series=new ArrayList<>();//[50,30,...]
		
		for (Object[] object : list) {
			String category=(String) object[0];
			categories.add(category);
		}
		
		for (Object[] object : list) {
			Long serie= (Long) object[1];
			series.add(serie);
		}
		//把数据存到map集合中返回到页面上 {"categories":["河南分公司","上海分公"....],"series":[50,30,.....]}
		Map<String, Object> result=new HashMap<>();
		result.put("category", categories);
		result.put("series", series);
		//{"categories":["河南分公司","上海分公司"...],"series":[50,30...]}
		ActionContext.getContext().getValueStack().push(result);
		return SUCCESS;
	}

}

4service

@Override
	public List<Object[]> findCourierByGroup() {
		
		return courierDao.findCourierByGroup();
	}

5.dao

//按公司分组统计快递员人数(投影查询)
@Query("select c.company,count(*) from Courier c group by c.company")
public List<Object[]> findCourierByGroup();

highChsrts的shiyon

Highcharts ： 折线图、 区域图、 柱状图、 饼状图 …

下边仅以折线图和柱状图演示:

Highcharts ：折线图、区域图、柱状图、饼状图 …