日期:2014-05-16  浏览次数:20409 次

javascript 表格数据可视化
function getColumnInfo() {
	     
	    thObj = $("#query-result-data th")[3];	     
	    info = new Object();
	    info.title = thObj.innerHTML;
	    position = thObj.cellIndex;	
	    
	    columnSize = $("#query-result-data th").length;

	    info.categories = new Array();
	    tdArray = $("#query-result-data td");

	    count = 0;
	    index = 0;
	    for(count = 0; count < tdArray.length - columnSize; count = count+columnSize) {
	        info.categories[index++] = tdArray[count].innerHTML;
	    }


	    info.yText = $("#query-result-data th")[0].innerHTML;


	    serie = new Object();
	    serie.name = thObj.innerHTML;
	    serie.data = new Array();
	    index = 0;
	    for(count = 0; count < tdArray.length - columnSize; count = count+columnSize) {
	        serie.data[index++] = parseInt(tdArray[count + position].innerHTML);
	    }    
	    
	    info.serie = serie;    
	    return info;
	    
	    
	}
	
	info = getColumnInfo();

	chart = new Highcharts.Chart({
	    chart: {
	        renderTo: 'visual-data',
	        type: 'line',
	        marginRight: 130,
	        marginBottom: 25
	    },
	    title: {
	        text: info.title,
	        x: -20 //center
	    },
	    subtitle: {
	        text: 'Source: WorldClimate.com',
	        x: -20
	    },
	    xAxis: {
	        categories: info.categories
	    },
	    yAxis: {
	        title: {
	            text: 'Temperature (°C)'
	        },
	        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: [{
	            name: info.serie.name,
	            data: info.serie.data
}]
	        });