highcharts做柱状图与曲线图

最新推荐文章于 2021-03-02 15:11:46 发布

没有水勒鱼

最新推荐文章于 2021-03-02 15:11:46 发布

阅读量1.1k

点赞数 1

分类专栏： java JavaScript 文章标签： javascript jsp highcharts

本文链接：https://blog.youkuaiyun.com/sinat_31998357/article/details/50343569

版权

java 同时被 2 个专栏收录

53 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

本文介绍了如何在JavaScript和JSP项目中使用Highcharts库来绘制柱状图和曲线图。首先，需要在WebRoot目录下引入必要的js文件。Highcharts提供column类型用于绘制柱状图，spline类型用于绘制曲线图。详细步骤和js文件可参考指定的优快云下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、WebRoot下导入两个js文件，并引入到jsp里

<script type="text/javascript" src="js/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="js/highcharts/js/modules/exporting.js"></script>

2、创建一个div，存放图

<div id="main"
					style="float: left; width: 780;height:400; margin: 0 15px 0 -10px;"></div>

3、开始写js方法，调action，生成图片

var x=[];
				var y=[];
				$.getJSON('dayOnePicRain.action?beginyear='+beginyear+'&endyear='+endyear
						+'&month='+month+'&day='+day+'&station='+station,function(data){
					if(data!=null){
						$.each(data.list,function(i,item){
							
							x.push(item.YEAR);
							y.push(item.AVG);
						
					});
					
					console.log(x);
					console.log(y);
					showChart(x,y);
					}else{
						alert("暂无数据");
					}
				});
				function showChart(x,y){

					var options =new Highcharts.Chart({
						chart : {
							renderTo : 'main',
							type : 'column',
						},
						credits: { 
				            enabled: false   //右下角不显示LOGO 
				        }, 
						title : {
							text : station+":"+beginyear + "年至" + endyear + "年"
							+ month+"月" +day+ "日降水变化柱状图"          //图表标题
						},
						xAxis : {
							categories:x
						},
						yAxis : {
							title : {
								text : '降水/mm'
							}
						},
						series : [{
							name:'降水',
							data:y
						}]
					});
				}

column：柱状图

spline：曲线图

若要生成曲线图，把column改成spline就可以了

所需的js文件请到http://download.youkuaiyun.com/detail/sinat_31998357/9365059下载。