highcharts+jquery+grails前台数据显示的问题

曹克江 发布于 2013/04/25 10:44
阅读 1K+
收藏 0

小弟我初学highcharts 现在要做个以时间为查询条件去数据库查询数据 得到的结果显示在highcharts上 ,x轴时间的刻度要根据查询结果来设置 怎么做,还有返回的数据如何绑定到highcharts上  求帮忙 明天就要了  

这是前端代码:

var chart;
   function DrawChart(){
        chart = new Highcharts.Chart({
            reflow:true,
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            exporting: {
             enabled:false
             },
            title: {
                text: 'Kinds Of Indexs Of Pisciculture ',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                 title: {
                    text: '时段'
                },
                categories: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00',
                    '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
            },
            yAxis: {
                title: {
                    text: 'Values'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: '温度 - ℃',
                data: []
            }, {
                name: '溶氧(DO) - mg/L',
                data: []
            }, {
                name: 'pH值 ',
                data: []
            }, {
                name: '氧化还原电位(ORP) - mV',
                data: []
            }]
        });
    }

 

 

下面这个方法是onclick时调用

function getChartdata(deviceId){
 $.ajax({
  async : true,
  type: "POST",
  url: "home/searchaDataByDate",
  data: {dateFrom: $("#dateFrom").attr("value"),dateTo:$("#dateTo").attr("value"),deviceId:deviceId},
  success: function(chartData)
  {
   
      debugger;
    DrawChart();
    chart.series[0].setData(chartData.temp);
    chart.series[1].setData(chartData.rdo);
    chart.series[2].setData(chartData.ph);
    chart.series[3].setData(chartData.orp); 
  }
  });//ajax end
}
后台的查询时如下的

 

def searchaDataByDate(String deviceId){
  
  print "searchaDataByDate"
  // def dateTime=new Date().format("yyyyMMdd")
         long df  =0// Long.parseLong(dateFrom)
         long dt  =11111111111111111// Long.parseLong(dateTo)
   long did = Long.parseLong(deviceId)
   print did
 
        def samples = Sample.createCriteria().list(params) {
            eq('deviceId', did)
            ge('timestamp', df)
            lt('timestamp', dt)
        }
  render(contentType: "text/json") {
   total = samples.totalCount
   rows = samples.collect { sample ->
    def data = sample.data
    data.keySet().each { key ->
     data[key] = g.formatNumber(number: data[key], maxFractionDigits: 2)
    }//todo performance
    return [id: sample.id, collectTime: new Date(sample.timestamp).format('yyyy-MM-dd HH🇲🇲ss')] + data
    }
   }
   
  }有些参数是为了调试方便的

 

 

现在后台代码怎么写 才能在前面显示我查询的数据?

 

 

加载中
0
曹克江
这是前台得到的后台查询的数据格式  {"total":29,"rows":[{"id":49584,"collectTime":"2013-04-21 15:12:00","ph":"6.8","rdo":"12.3","temp":"18.1","orp":"9.8","pressure":"0","conductivity":"0"},{"id":49585,"collectTime":"2013-04-21 15:13:00","temp":"18.1","conductivity":"0","rdo":"12.3","orp":"9.8","pressure":"0","ph":"6.8"},{"id":49586,"collectTime":"2013-04-21 15:14:00","pressure":"0","ph":"6.8","temp":"18.1","conductivity":"0","orp":"9.8","rdo":"12.3"},{"id":49587,"collectTime":"2013-04-21 15:15:00","rdo":"12.3","orp":"9.8","temp":"18.1","pressure":"0","conductivity":"0","ph":"6.8"},{"id":49588,"collectTime":"2013-04-21 15:16:00","rdo":"12.3","temp":"18.1","conductivity":"0","pressure":"0","ph":"6.8","orp":"9.8"},{"id":49589,"collectTime":"2013-04-23 15:17:00","temp":"18.1","pressure":"0","orp":"9.8","rdo":"12.3","conductivity":"0","ph":"6.8"},{"id":49590,"collectTime":"2013-04-23 15:18:00","conductivity":"0","pressure":"0","orp":"9.8","ph":"6.8","temp":"18.1","rdo":"12.3"},{"id":49591,"collectTime":"2013-04-23 15:19:00","conductivity":"0","ph":"6.8","orp":"9.8","rdo":"12.3","temp":"18.1","pressure":"0"},{"id":49592,"collectTime":"2013-04-23 15:20:00","pressure":"0","rdo":"12.3","ph":"6.8","temp":"18.1","conductivity":"0","orp":"9.8"},{"id":49593,"collectTime":"2013-04-23 15:21:00","ph":"6.8","pressure":"0","rdo":"12.3","temp":"18.1","conductivity":"0","orp":"9.8"},{"id":49594,"collectTime":"2013-04-23 17:04:00","pressure":"0","ph":"6.8","conductivity":"0","orp":"9.8","temp":"18.1","rdo":"12.3"},{"id":49595,"collectTime":"2013-04-23 17:05:00","temp":"18.1","orp":"9.8","pressure":"0","ph":"6.8","rdo":"12.3","conductivity":"0"},{"id":49596,"collectTime":"2013-04-23 17:06:00","ph":"6.8","temp":"18.1","orp":"9.8","conductivity":"0","rdo":"12.3","pressure":"0"},{"id":49597,"collectTime":"2013-04-23 17:07:00","ph":"6.8","temp":"18.1","conductivity":"0","pressure":"0","orp":"9.8","rdo":"12.3"},{"id":49598,"collectTime":"2013-04-23 17:08:00","pressure":"0","temp":"18.1","conductivity":"0","ph":"6.8","orp":"9.8","rdo":"12.3"},{"id":49599,"collectTime":"2013-04-23 17:10:00","pressure":"0","temp":"18.1","rdo":"12.3","conductivity":"0","orp":"9.8","ph":"6.8"},{"id":49600,"collectTime":"2013-04-23 17:11:00","conductivity":"0","pressure":"0","orp":"9.8","ph":"6.8","temp":"18.1","rdo":"12.3"},{"id":49601,"collectTime":"2013-04-24 10:10:00","pressure":"0","ph":"6.8","rdo":"12.3","temp":"18.1","orp":"9.8","conductivity":"0"},{"id":49602,"collectTime":"2013-04-24 10:11:00","ph":"6.8","conductivity":"0","rdo":"12.3","pressure":"0","orp":"9.8","temp":"18.1"},{"id":49603,"collectTime":"2013-04-24 10:12:00","pressure":"0","rdo":"12.3","temp":"18.1","ph":"6.8","conductivity":"0","orp":"9.8"},{"id":49604,"collectTime":"2013-04-24 10:13:00","temp":"18.1","pressure":"0","conductivity":"0","rdo":"12.3","ph":"6.8","orp":"9.8"},{"id":49605,"collectTime":"2013-04-24 10:14:00","pressure":"0","orp":"9.8","rdo":"12.3","ph":"6.8","conductivity":"0","temp":"18.1"},{"id":49606,"collectTime":"2013-04-24 10:15:00","ph":"6.8","rdo":"12.3","conductivity":"0","orp":"9.8","pressure":"0","temp":"18.1"},{"id":49607,"collectTime":"2013-04-24 10:17:00","conductivity":"0","pressure":"0","temp":"18.1","rdo":"12.3","orp":"9.8","ph":"6.8"},{"id":49608,"collectTime":"2013-04-24 10:18:00","temp":"18.1","ph":"6.8","conductivity":"0","pressure":"0","orp":"9.8","rdo":"12.3"},{"id":49609,"collectTime":"2013-04-24 10:19:00","ph":"6.8","rdo":"12.3","conductivity":"0","pressure":"0","temp":"18.1","orp":"9.8"},{"id":49610,"collectTime":"2013-04-24 10:20:00","orp":"9.8","conductivity":"0","ph":"6.8","temp":"18.1","pressure":"0","rdo":"12.3"},{"id":49611,"collectTime":"2013-04-24 10:21:00","orp":"9.8","ph":"6.8","temp":"18.1","rdo":"12.3","conductivity":"0","pressure":"0"},{"id":49612,"collectTime":"2013-04-24 10:22:00","conductivity":"0","temp":"18.1","orp":"9.8","pressure":"0","rdo":"12.3","ph":"6.8"}]}
0
Oconnor
Oconnor

我的,你参考参考吧:

<script>
	
	var chart ;
	var store_id='${param.store_id}';
	var range = "week";
	var xAxis;
	var type = "pv";
	var options = {
			chart: {
				renderTo: 'chart',
				type: 'line',
				marginRight: 130,
				marginBottom: 25
			},
			title: {
				text: '',
				x: -20 
			},
			xAxis: {
				categories: []
			},
			credits: {
				enabled: false
			},
			exporting: {
					enabled: false
			},
			yAxis: {
				title: {
					text: ''
				},
				plotLines: [{
					value: 0,
					width: 1,
					color: '#808080'
				}]
			},
			tooltip: {
				formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
						this.x +': '+ this.y;
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 100,
				borderWidth: 0
			},
			series: []
		};
	function initTab() {
		$(".tab-type13 li").click(function() {
			$(this).addClass("current").siblings().removeClass();
			$("#"+$(this).children().attr("class")).show().siblings().hide();
		})
	}
	
	$(document).ready(function(){
		initTab();
		chart = new Highcharts.Chart(initOptions(range,type));
		
		function initOptions(range,type){
			options.xAxis.categories = getDays(range,type,store_id);
			if(range == 'month'){
				options.xAxis["labels"]={"step":2};
			}else if(range == 'half'){
				options.xAxis["labels"]={"step":4};
			}else if(range == 'oneyear'){
				options.xAxis["labels"]={"step":6};
			}else{
				options.xAxis["labels"]={"step":1};
			}
			var op = {
					name:type,
					data:getValue(range,type,store_id)
					}
			//添加线条
			options.series.push(op);
			if(type == 'pv'){
				var uv = {
						name:'uv',
						data:getValue(range,'uv',store_id)
						}
				options.series.push(uv);
			}
			return options;
		};
		
		function getValue(range,key,storeId){
			var value = [];
			$.ajax({
				url:"<%=request.getContextPath()%>/public/query.do",
				type:'GET',
				data:"range=" + range + "&key=" + key + "&storeId=" + storeId,
				dataType: 'json',
		        async:false,
				success:function(data){
					for(var i=0 ;i < data.length;i++){
						value.push(parseInt(data[i].value));
					 }
				}
			});
			return value;
		}
		
		function getDays(range,key,storeId){
			var value = [];
			$.ajax({
				url:"<%=request.getContextPath()%>/public/query.do",
				type:'GET',
				data:"range=" + range + "&key=" + key + "&storeId=" + storeId,
				dataType: 'json',
		        async:false,
				success:function(data){
					for(var i=0 ;i < data.length;i++){
						if(range == 'half' || range == 'oneyear'){
							var tmp = data[i].day;
							value.push(tmp.substring(4,8) + '0');
						}else{
							value.push(data[i].day);
						}
					 }
				}
			});
			return value;
		}
		
		$(".range").click(function(){
			range = $(this).attr("id");
			cleanline();
			chart = new Highcharts.Chart(initOptions(range,type));
		});
		
		$(".type").click(function(){
			type = $(this).attr("id");
			cleanline();
			chart = new Highcharts.Chart(initOptions(range,type));
		});
		
		function cleanline(){
			options.series.length = 0;
		}
	});
</script>

Oconnor
Oconnor
json格式的 JSONArray.fromObject(mapper.getList(map)); List里面是对象
曹克江
万分感谢你的回答 请问你的数据在后台怎么封装的
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部