delete the YTD button form highstock plugin
This commit is contained in:
Li Jianxuan
parent
b15e1b59b6
commit
3409a60d43
|
|
@ -1,158 +1,178 @@
|
|||
<?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>'});
|
||||
}
|
||||
<?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,
|
||||
buttons: [{
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '1m'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 3,
|
||||
text: '3m'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 6,
|
||||
text: '6m'
|
||||
}, {
|
||||
type: 'year',
|
||||
count: 1,
|
||||
text: '1y'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
|
||||
'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>
|
||||
Loading…
Reference in New Issue