westdc-zf1/application/default/views/scripts/visual/index.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle()->setSeparator(' - ');
$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
$this->headLink()->appendStylesheet('/css/colorbox.css');
$this->headScript()->appendFile('/static/js/highstock/highstock.js');
$this->headScript()->appendFile('/static/js/highstock/modules/exporting.js');
//$this->headScript()->appendFile('/static/js/highcharts/highcharts.js');
//$this->headScript()->appendFile('/static/js/highcharts/modules/exporting.js');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">数据与服务</a>');
$this->breadcrumb('数据可视化');
$this->breadcrumb()->setSeparator(' > ');
?>
<!-- 左侧导航 -->
<div id='sidebar' style="width:240px;float:left;overflow:hidden;">
	<div class="tbox mt12">
		<div class="title corners-top">气象数据</div>
        <div class="content">
            <ul>
                <li><button value="temperature" class="fetchSeries btn meteorology">气温</button></li>
                <li><button value="windspeed" class="fetchSeries btn meteorology">风速</button></li>
                <li><button value="precipitation" class="fetchSeries btn meteorology">日合计降水量</button></li>
                <li><button value="sunshine" class="fetchSeries btn meteorology">日照小时数</button></li>
            </ul>
    	</div>
    </div>
    <div class="tbox mt12">
		<div class="title corners-top">水文数据</div>
        <div class="content">
            <ul>
                <li><button value="dp" class="fetchSeries btn hydrology">日降水量</button></li>
                <li><button value="mtp" class="fetchSeries btn hydrology">月降水量</button></li>
                <li><button value="yrp" class="fetchSeries btn hydrology">年降水量</button></li>
                <li><button value="dq" class="fetchSeries btn hydrology">日平均流量</button></li>
                <li><button value="mtq" class="fetchSeries btn hydrology">月平均流量</button></li>
                <li><button value="yrq" class="fetchSeries btn hydrology">年平均流量</button></li>
            </ul>
    	</div>
    </div>
    <div class="tbox mt12">
		<div class="title corners-top">环境监测</div>
        <div class="content">
            <ul>
                <li><button value="tsp" class="fetchSeries btn ambient">总悬浮颗粒物</button></li>
                <li><button value="pm10" class="fetchSeries btn ambient">可吸入颗粒物</button></li>
                <li><button value="so2" class="fetchSeries btn ambient">二氧化硫</button></li>
                <li><button value="no2" class="fetchSeries btn ambient">二氧化氮</button></li>
            </ul>
    	</div>
    </div>

</div>
<!-- //左侧导航 -->

<!-- 页面内容 -->
<div id="wapper" style="width:700px;overflow:hidden;float:right;" class="mt12">
	<div id="loading" style="margin:0px;border:1px solid #ccc;height:500px;background:url(/images/loading.gif) center center no-repeat;display:none"></div>
    <div id="tableTitle"></div>
    <div id="datachart" style="width:700px;height:500px;"></div>
    
</div>
<!-- //页面内容 -->
<script>
function drawchart(type,range,data,title) {
	// Create the chart
		window.chart = new Highcharts.StockChart({
			'chart' : {
				'renderTo' : 'datachart',
				'type': type
			},
			
			'rangeSelector' :{
				'enabled' : true,
				'selected' : range
			},
			
			'credits':{
				'enabled': false
			},
			
			'exporting': {
				'enabled': false
			},

			'title' : {
				'text' : title
			},
			
			'series' : data
			
		});
}
$(".fetchSeries").click(function () {
		
	var button = $(this);
	
	$('.fetchSeries').removeClass('btn-green');
	button.addClass('btn-green');
	
	var ac = button.val();
	var dt = "";
	
	if(button.hasClass('meteorology'))
	{
		dt = 'meteorology';
	}
	
	if(button.hasClass('hydrology'))
	{
		dt = 'hydrology';
	}
	
	if(button.hasClass('ambient'))
	{
		dt = 'ambient';
	}
	
	$('#datachart').html('');
	
	function onDataReceived(series) {
		if(typeof(series)=='undefined')
		{$('.fetchSeries').removeClass('btn-green');Alert('未请求到数据');return false;}
		if(typeof(series.datas)=='undefined' || series.datas=='')
		{$('.fetchSeries').removeClass('btn-green');Alert('未请求到数据');return false;}
		if(typeof(series.error)!='undefined') 
		{$('.fetchSeries').removeClass('btn-green');Alert(series.error);return false;}
		drawchart(series.type,series.range,series.datas,series.title);
	 }
	
	$.ajax({
		'url': '/visual/data/',
		'data': 'ac='+ac+'&dt='+dt,
		'method': 'GET',
		'dataType': 'json',
		'success': onDataReceived,
		'timeout': 30000
	});

});
$('#loading').ajaxComplete(function() {
  $(this).css('display','none');
  $('#datachart').css('display','block');
});
$('#loading').ajaxSend(function() {
  $(this).css('display','block');
  $('#datachart').css('display','none');
});
$("#loading").ajaxError(function() {
  $(this).css('display','none');
  $('.fetchSeries').removeClass('btn-green');
  Alert('请求超时或服务器开小差了，请刷新页面后重试');
});
function Alert(html){
	$.colorbox({'innerWidth':'50%','html':'<h4>'+html+'</h4>'});
}
</script>