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

Question

小弟我初学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

Answer 1

万分感谢你的回答 请问你的数据在后台怎么封装的

Answer 2

json格式的 JSONArray.fromObject(mapper.getList(map))； List里面是对象

Answer 3

我的，你参考参考吧：

<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>