您的位置：首页 > 其它

Highcharts（二） 基础柱状图 ajax动态刷新

2017-11-27 10:16 204 查看

一、背景

显示不同区域的不同项目类型的完成数量

二、项目结构及引用

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",
"0",
"0",
"1"
],
"name": "清水治污"
},
{
"data": [
"1",
"0",
"1",
"2"
],
"name": "绿满家园"
},
{
"data": [
"1",
"0",
"0",
"1"
],
"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;
}

}


四、效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航