histogramchart柱状图动态数据

tabcolstr=[{"colname":"DESCRIPTION","dataType":"VARCHAR2","description":"地点","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM1","dataType":"NUMBER","description":"2014-05","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM2","dataType":"NUMBER","description":"2014-06","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM3","dataType":"NUMBER","description":"2014-07","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM4","dataType":"NUMBER","description":"2014-08","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"}]

 

 

jsonarray=[{"colname":"DESCRIPTION","dataType":"VARCHAR2","description":"地点","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM1","dataType":"NUMBER","description":"2014-05","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM2","dataType":"NUMBER","description":"2014-06","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM3","dataType":"NUMBER","description":"2014-07","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"},{"colname":"NUM4","dataType":"NUMBER","description":"2014-08","isshow":0,"tabname":"REPORT_CONFIGQUERY_372"}]

 

 

<script type="text/javascript">
$(function () {
	var tabcolstr='${tabcollist}';
	var tabcoljson = $.parseJSON(tabcolstr);	
	var tabcoldata =  new Array();
	for(var i=1;i<tabcoljson.length;i++){
		tabcoldata[i-1]=tabcoljson[i].description;
	}	
	var jsonarray='${jsonarray}';
	var arraydata = $.parseJSON(jsonarray);
	var first=tabcoljson[0].description;
	var showdata =  new Array();
	var value="";
	for(var i=0;i<arraydata.length;i++){		
		showdata.push([]);
		var valuearray =  new Array();
		for(j=0;j<tabcoldata.length;j++){
			value=arraydata[i][tabcoldata[j]];
			if(value==""){
				value=0;
			}
			valuearray[j]=Number(value);
		}
		var json = {  
            "name":arraydata[i][first],  
            "data":valuearray  
        };
		showdata[i]=json;
	}
	
    $('#histogramcharshow').highcharts({
        chart: {
            type: 'column'
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        title: {
            text: '${reportConfig.name}'
        },
        xAxis: {
            categories:tabcoldata
        },
        yAxis: {
            min: 0,
            title: {
                text: '${reportConfig.unit}'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span>',
            pointFormat: '' +
                '',
            footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f}</b></td></tr></tbody></table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: showdata
    });
});
</SCRIPT>