关于highCharts的一些小的要注意的地方

最近做了一些关于highchart的东西当然我只是往里面填充数据一类的，发现higcharts虽然是个好东西但是好多细节还是要多多注意的。下面就具体的说说

   var uanList;
var ubnList;
var ucnList;
var timeList;

var iaList;
var ibList;
var icList;


var pa;
var pb;
var pc;

function getDayData(){
	$("#dianya").css("color","blue");
	$("#dianliu").css("color","gray");
	$("#gonglv").css("color","gray");
	$.getJSON('meterDataHisAction!queryMeterDataHisU.action',function(data){
		uanList = data.UAN;
		ubnList = data.UBN
		ucnList = data.UCN;
		timeList = data.TIME;
	$(function () {
        $('#curve1').highcharts({
            chart: {
                type: 'spline',
				backgroundColor:"transparent"
            },
            title: {
                style:{"display":"none"}
            },
			credits: {
				enabled: false
			},
            xAxis: {
                type: 'datetime',
                /*
               	labels: {  
                        formatter: function () {
                            return (new Date().getHours()-1)+":00";  
                        }  
                    } */
            	categories:timeList
            },
            yAxis: {
                title: {
                    text: 'uan,ubn,ucn'
                },
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name+ '</b><br/>'+
                        this.x+'<br/>'+this.y +' v';
                }
            },
            series: [{
                name: 'uan相电压',
                data: uanList
            }, {
                name: 'ubn相电压',
                data: ubnList
            },{
                name: 'ucn相电压',
                data:  ucnList
            }
            ]
        });
   	 });	
	});
}

function getDianLiu(){
	$("#dianliu").css("color","blue");
	$("#dianya").css("color","gray");
	$("#gonglv").css("color","gray");
	$.getJSON('meterDataHisAction!queryMeterDataHisI.action',function(data){
		iaList = data.IA;
		ibList = data.IB;
		icList = data.IC;
		timeList = data.time;
	$(function () {
        $('#curve1').highcharts({
            chart: {
                type: 'spline',
				backgroundColor:"transparent"
            },
            title: {
                style:{"display":"none"}
            },
			credits: {
				enabled: false
			},
            xAxis: {
                type: 'datetime',
                categories:timeList
            },
            yAxis: {
                title: {
                    text: 'ia,ib,ic'
                },
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x+'<br/>'+this.y +' A';
                }
            },

            series: [{
                name: 'ia线电流',
                data: iaList
            }, {
                name: 'ib线电流',
                data: ibList
            },{
                name: 'ic线电流',
                data:  icList
            }
            ]
        });
   	 });	
	});
}

function getGongLv(){
	$("#gonglv").css("color","blue");
	$("#dianliu").css("color","gray");
	$("#dianya").css("color","gray");
	$.getJSON('meterDataHisAction!queryMeterDataHisP.action',function(data){
		paList = data.PA;
		pbList = data.PB;
		pcList = data.PC;
		timeList = data.time;
	$(function () {
        $('#curve1').highcharts({
            chart: {
                type: 'spline',
				backgroundColor:"transparent"
            },
            title: {
                style:{"display":"none"}
            },
			credits: {
				enabled: false
			},
            xAxis: {
                type: 'datetime',
                categories:timeList
            },
            yAxis: {
                title: {
                    text: 'pa,pb,pc'
                },
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x+'<br/>'+this.y +' kw';
                }
            },
            series: [{
                name: 'pa功率',
                data: paList
            }, {
                name: 'pb功率',
                data: pbList
            },{
                name: 'pc功率',
                data:  pcList
            }
            ]
        });
   	 });	
	});
}

$(document).ready(function(){
	$(function(){
		getDayData();
	});
	window.setInterval(getDayData,3*3000);
});

以上是一段添加了js的html用到了highcharts首先拿到数据务必要保证x轴的数据和你series里面的数据同样多不然的话就显示不出来这是其一。其二highcharts里面的逗号也很有讲究的比如：

     series: [{
                name: 'pa功率',
                data: paList
            }, {
                name: 'pb功率',
                data: pbList
            },{
                name: 'pc功率',
                data:  pcList
            }
            ]

有这么一段代码data都是一个集合里面的最后一个元素没有了逗号但是如果是这样请务必加上逗号如下：

    series: [
		{
		     name : "最高负荷",
		     data : monthHData
		},
		{
		     name : "最低负荷",
		     data :  monthLData,
		       marker: {
			        symbol:"circle",
				enabled:false
				}
		}
	     ]

第二个集合中monthLData下面还有元素marker那么monthData就要加逗号了不然要出错。
第三series中的数据一定是一个类似Java中list的集合并且不要嵌套要像这样的list比如：
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]千万不要在list里面再嵌套不然会出现图线在一起的错误。
第四list集合如果里面是数字的话在Java后台中就不要包装成string类型的不然还是显示不出来