Question

Highcharts和java的饼图之类的，谁有demo，发给我一份

网上很多都是只是前台写死的数据，我想学习，从数据库取值，然后返到前台的过程，这个东西就是难者不会，会者不难，求一份demo，学习下，多谢

Answer 1

我之前做项目的时候也动态做过动态为highcharts赋值的方法，其实很简单，我这边用的是SpringMVC框架，用的时候新建了一个list

1. List<Object> dnsPack = new ArrayList<Object>();
存储数据，我封装的是一个个的值，然后通过SpringMVC的标签将返回参数转为了JSON数据，这里说SpringMVC没什么特别的意思，只是想强调的是你传回前台的数据必须是json格式，
然后在前台引用的时候
//调用后台接口
2. $.post('bs/dnsFlow/getPageModel.do?'+params, function(data){
loadHighcharts('invalid_pack','无效应答包数',data);
});
3.初始化方法
function loadHighcharts(divId,divTitle,data){
new Highcharts.Chart({
chart:{
renderTo : divId,
defaultSeriesType:'spline'//图表的显示类型（line,spline,scatter,areaspline, bar,pie,area,column）
},
title: {
text: divTitle,
x: -20 //center
},
xAxis: {
labels:{
enabled:false//取消x轴展示
}
// categories:time
},
credits:{
enabled:false
},
yAxis: {
title: {
text: '数量'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
//配置数据点提示框，使其不显示
tooltip : {
// crosshairs : true,
// shared : true
useHTML:true,
formatter:function(){
return "时间:" + time[this.x] + "</br>" +this.series.name + ":" +this.y;
}
},
//配置数据使其点显示信息
plotOptions : {
// spline : {
// dataLabels : {
// enabled : true
// },
// enableMouseTracking : true
// },
series:{
marker:{
enabled:false
}
}
},
legend: {
enabled:false
},
series: [{
name: divTitle,
data: data
}]
});

}

将你传入的参数放入series中的data属性即可。

Answer 2

写死的那几个地方 替换成异步请求返回的json 也就是data ;
简单的参考：（不同的业务环境可能会有不同）
$(function () {
...............
...............
loadBuoy(); //页面加载此方法
});
//数据加载
function loadBuoy () {
var url = "<%=basePath%>/web/web_loadChart.action?timeDate=" + new Date().getTime();
$.getJSON(url, {
"type" : type
}, function(data, struts) {
alert(data);
if (struts == "success") {
if (data != null) {
initMatSurface($.parseJSON(data)); //执行此方法
} else {
$("#container").html("<h2>没有数据！</h2>");
}
} else {
$("#container").html("<h2>数据异常 ！</h2>");
}

});
}

//绘制图表 里面没个属性 你就对着api看看自己怎么配置function initMatSurface (data) {
var d = new Date();
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
borderWidth: 1,
defaultSeriesType: 'line'
},
title: {
text:typeName_CN+"实时观测数据",
X:-20
},
xAxis: {
type: 'datetime',
labels: {
formatter: function(){
return dateTransformation(this.value,'x');
}
}
},
yAxis: {
min: 0,
title: {
text: 'real-time value '
}
},
tooltip: {
formatter: function() {
var xShow = "时间：" + dateTransformation(this.x,'y');
var yShow = "值：" + this.y;
return yShow + "<br/>" + xShow;
}
},
legend: {
enabled : false
},
credits: {
enabled : false
},
plotOptions: {
spline: {
states: {
hover: {
enabled: false,
lineWidth: 1
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 1,
lineWidth: 1
}
}
},
pointInterval: 2*(2*60*60*60)
}
},
series: [{
data: data,
color: 'red'
}]
});

}

Answer 3

前台写死是撒意思 前台获取后台数据就好了