您的位置：首页 > 编程语言 > Java开发

highcharts如何接收java作为后台 struts2 传递过来的动态数据

2013-06-26 15:07 726 查看

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['米卡莎', '尤米尔', '艾伦', '阿尔米', '皮克西斯','康尼','莱纳'],
name = '进击的巨人',
data = [
{
y: 75.11,
color: colors[0],
},
{
y: 21.63,
color: colors[1],
},
{
y: 11.94,
color: colors[2],
},
{
y: 20,
color: colors[3],
},
{
y: 30,
color: colors[5],
},
{
y: 7.15,
color: colors[6],
},
{
y: 2.14,
color: colors[4],
}];

function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}

var chart = $('#container').highcharts({
chart: {
type: 'column',
borderWidth:'1',
plotBorderColor:'#000000'
},
title: {
text: '吸烟有害健康'
},
xAxis: {
categories: categories,
gridLineWidth:'0'
},
yAxis: {
title: {
text: '',
gridLineWidth:'0'
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
cursor: 'pointer',
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y;
}
}
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
})
.highcharts(); // return chart
});

</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

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

</body>
</html>

                    这是静态的页面刚开始想着很简单   直接从后台拼成和前面静态内容一样的格式就行了   果断悲剧前台用一个隐藏域hidden来接受后台传递过来的动态数值例如后台传给前台一个detailStr = "['米卡莎', '尤米尔', '艾伦', '阿尔米', '皮克西斯','康尼','莱纳']" 然后js中获取到（这个是X轴显示的内容，data同理也是拼接的字符串）赋给相应的值   内容一样但总是显示不出来

               各种搜索   问题解决大致如下第一种后台用JSON格式来保存字符串（前台需不需要做一下解析 -。-没试好像挺麻烦的样子）   第二种    后台存特定字符串例如 '10', '5', '15', '25', '15', '26', '25' 前台用Array进行字符串处理比如逗号分隔然后用parseint进行转换存入新的Array 但是这样就没法保存其他一些属性了比如我不同的圆柱形用不同的颜色这样的话还得从前台判断太麻烦我后台自己直接判断拼成字符串要简单的多
这个原理是貌似必须把 String转换成int类型才能显示。

          说了这么多还有个最为简单的方法    回到最开始的想法   后台拼接成都字符串和静态的字符串一模一样为什么不行只要加一个eval就解决了太坑爹了搜了半天还是无意中看了一个试一下果断OK了   data = eval(document.getElementById("data").value); 这个data是从后台获取到的动态拼接的字符串加一个eval就搞定了这个确实没明白是什么原理貌似是自动转换成JS格式神马的不太懂。懂得也可以M我

没具体的例子不懂得可以问我

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： highcharts struts2 动态绑定数据

相关文章推荐

新的分享

章节导航