一、背景
显示不同区域的不同项目类型的完成数量
二、项目结构及引用
Highcharts文件
jquery文件（jquery.min.js）
三、内容
- html
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css"> </style>
</head>
<body>
<div id="containerColumn" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script src="js/jquery.min.js"></script>
<!--Highcharts处理图形-->
<script src="Highcharts-6.0.2/code/highcharts.js"></script>
<!--Highcharts处理图形 柱状图-->
<script src="Highcharts-6.0.2/code/modules/exporting.js"></script>
<!--自己写的-->
<script src="js/column.js" charset="utf-8"></script>
</body>
</html>
- js
var urlDataTable='http://localhost:8080/SpringWind/dataMonitor/listData';//数据请求接口
var dataColumnSeries;
var dataColumnCategories;
var chartColumn;
//初始化柱状图
initChartColumn();
//请求数据-柱
ajaxRequest();
//初始化柱状图
function initChartColumn(){
// 创建空数据柱状图
chartColumn = {
chart: {
renderTo: 'containerColumn',//DIV容器ID
type: 'column'//报表类型
},//报表名称
title:{
//text:'项目进度'
text:'项目完成数量'
},//补充说明
//subtitle: {
// text: '项目完成数量'
//},
yAxis: {
min: 0,title: {
text: '单位(项)'
}
},credits:{
enabled:false//隐藏公司链接
},exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},tooltip: {//弹出框
headerFormat: '<span style="font-size:10px">{point.key}<table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} 项</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true
},//x轴显示内容
xAxis: {
categories: [ ]
},//数据来源(多个对比的)
series: [],};
}
function ajaxRequest() {
var qyId = $("#qyId").val();
//alert(qyId);
$.ajax({
url : urlDataTable,type : "POST",dataType : "jsonp",jsonp:"callback",jsonpCallback:"successCallback2",data : {
qyId : qyId,},contentType:'application/x-www-form-urlencoded',async : false,timeout : 6000,success : function(data) {
if(data.success){
//构建柱状图数据并渲染
dataColumnSeries=jQuery.parseJSON(data.data.series);
dataColumnCategories=data.data.categories;
buildColumn(dataColumnCategories,dataColumnSeries);
}else{
alert("数据异常");
}
},error : function(error) {
alert("访问失败");
}
});
}
//构建柱状图数据并渲染
function buildColumn(dataColumnCategories,dataColumnSeries){
//对报表X轴显示名称赋值
chartColumn.xAxis.categories=dataColumnCategories;
//赋值 series
chartColumn.series = dataColumnSeries;
//绘制图表
chartColumn = new Highcharts.Chart(chartColumn);
}
- json结构
{"series": [ { "data": [ "2","0","1","3" ],"name": "清洁先行" },{ "data": [ "1","1" ],"name": "清水治污" },"2" ],"name": "绿满家园" },"name": "基础设施" } ]}
- Java数据
注意：假如使用Java，在设置实体类时需要把series对应的类型数据 的类型设为int型数组，如果是String类型highcharts会识别不了,而且命名必须为name、data；
用Integer.parseInt()把从数据库取出的String类型数据转换为int数据。
package com.baomidou.springwind.entity;
/** * 监测 柱状图数据 * highcharts column-basic数据填充要求 * @author EGWri * */
public class DataColumn {
private String name;//series对应的类型名
private int[] data; //series对应的类型数据
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int[] getData() {
return data;
}
public void setData(int[] data) {
this.data = data;
}
}