140 lines
5.2 KiB
PHTML
140 lines
5.2 KiB
PHTML
<?php
|
|
$this->headTitle($this->config->title->site);
|
|
$this->headTitle($this->config->title->data);
|
|
$this->headTitle()->setSeparator(' - ');
|
|
$theme = new Theme;
|
|
$theme->appendPlus($this,'highstock');
|
|
$this->breadcrumb('<a href="/">首页</a>');
|
|
$this->breadcrumb('<a href="/data">数据与服务</a>');
|
|
$this->breadcrumb('数据可视化');
|
|
$this->breadcrumb()->setSeparator(' > ');
|
|
?>
|
|
<div class="row">
|
|
<div class="span12">
|
|
<h3>选择数据集</h3>
|
|
<hr />
|
|
|
|
<div class="tabbable">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#tab1" data-toggle="tab">青海三江源自然保护区水资源监测含沙量数据</a></li>
|
|
<li><a href="#tab2" data-toggle="tab">青海三江源区珍秦草地生态综合站2011年土壤水分监测数据</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="tab1">
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc" data-subdataset="avg" data-seriename="2012逐月含沙量平均值">
|
|
2012年逐月平均值
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc" data-subdataset="max" data-seriename="2012逐月含沙量最大值">
|
|
2012年逐月最大值
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc" data-subdataset="min" data-seriename="2012逐月含沙量最小值">
|
|
2012年逐月最小值
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc2009" data-subdataset="avg" data-seriename="2009逐月含沙量平均值">
|
|
2009年逐月平均值
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc2009" data-subdataset="max" data-seriename="2009逐月含沙量最大值">
|
|
2009年逐月最大值
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc2009" data-subdataset="min" data-seriename="2009逐月含沙量最小值">
|
|
2009年逐月最小值
|
|
</a>
|
|
</div>
|
|
<div class="tab-pane" id="tab2">
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="20cm" data-seriename="珍秦草地生态综合站2011土壤水分20CM">
|
|
20CM
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="30cm" data-seriename="珍秦草地生态综合站2011土壤水分30CM">
|
|
30CM
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="40cm" data-seriename="珍秦草地生态综合站2011土壤水分40CM">
|
|
40CM
|
|
</a>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="50cm" data-seriename="珍秦草地生态综合站2011土壤水分50CM">
|
|
50CM
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- Tabbable -->
|
|
|
|
</div>
|
|
|
|
<!-- 页面内容 -->
|
|
<div class="span12">
|
|
<div id="datachart" style="width:100%;height:500px;"></div>
|
|
<a class="btn btn-primary control-btn-cls" href="javascript:void(0);">
|
|
清除图像
|
|
</a>
|
|
</div>
|
|
<!-- //页面内容 -->
|
|
</div>
|
|
<script>
|
|
_this = {};
|
|
$(function() {
|
|
|
|
$('#datachart').highcharts('StockChart', {
|
|
|
|
rangeSelector : {
|
|
selected : 1,
|
|
inputEnabled: $('#container').width() > 480
|
|
},
|
|
|
|
credits : {
|
|
enabled : false
|
|
}
|
|
|
|
});
|
|
|
|
var chart = $('#datachart').highcharts();
|
|
|
|
$(".control-btn").click(function(){
|
|
|
|
dataset = $(this).data('dataset');
|
|
subdataset = $(this).data('subdataset');
|
|
seriename = $(this).data('seriename');
|
|
|
|
for(i in chart.series)
|
|
{
|
|
if(chart.series[i].name == seriename)
|
|
{
|
|
chart.series[i].remove();
|
|
return;
|
|
}
|
|
}
|
|
|
|
$.ajax({
|
|
'url': '/visual/data',
|
|
'data': 'dataset=' + dataset + '&subdataset=' + subdataset,
|
|
'method': 'GET',
|
|
'dataType': 'json',
|
|
'success': function(data){
|
|
chart.addSeries({
|
|
name: seriename,
|
|
data: data,
|
|
type : 'column'
|
|
});
|
|
},
|
|
'timeout': 30000,
|
|
'global' : true
|
|
});
|
|
|
|
});
|
|
|
|
$(".control-btn-cls").click(function(e) {
|
|
for(i in chart.series)
|
|
{
|
|
chart.series[i].remove();
|
|
}
|
|
});
|
|
|
|
});
|
|
$( document ).ajaxSend(function() {
|
|
$('#loading').css('display','none');
|
|
});
|
|
$( document ).ajaxSend(function() {
|
|
$('#loading').css('display','block');
|
|
});
|
|
$( document ).ajaxSend(function() {
|
|
$('#loading').css('display','none');
|
|
});
|
|
</script>
|