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

最新推荐文章于 2015-06-15 14:30:31 发布

-蒙奇D路飞-

最新推荐文章于 2015-06-15 14:30:31 发布

阅读量2.5k

点赞数

文章标签： highcharts struts2 动态绑定数据

本文链接：https://blog.csdn.net/wushaoge0129/article/details/9179213

版权

<!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我没具体的例子不懂得可以问我

-蒙奇D路飞-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
8
评论
highcharts如何接收java作为后台 struts2 传递过来的动态数据

Highcharts Example $(function () { var colors = Highcharts.getOptions().colors, categories = ['米卡莎', '尤米尔', '艾伦', '阿尔米', '皮克西斯','康尼','莱纳'], name = '进击的巨人', data = [
复制链接

扫一扫