174 lines
3.4 KiB
PHTML
174 lines
3.4 KiB
PHTML
<?php
|
|
$this->headTitle($this->config->title->site);
|
|
$this->headTitle($this->config->title->author);
|
|
$this->headTitle()->setSeparator(' - ');
|
|
$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
|
|
$this->headLink()->appendStylesheet('/css/colorbox.css');
|
|
$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="visual">数据可视化</a>');
|
|
$this->breadcrumb()->setSeparator(' > ');
|
|
?>
|
|
<!-- 左侧导航 -->
|
|
<div id='sidebar' style="width:240px;float:left;overflow:hidden;">
|
|
<div class="tbox">
|
|
<div class="title">观测变量</div>
|
|
<div class="content">
|
|
<ul>
|
|
<li><button value="1" class="fetchSeries btn">气温</button></li>
|
|
<li><button value="2" class="fetchSeries btn">风速</button></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- //左侧导航 -->
|
|
|
|
<!-- 页面内容 -->
|
|
<div id="wapper" style="width:700px;overflow:hidden;float:right;">
|
|
<div id="tableTitle"></div>
|
|
<div id="datachart" style="width:100%;height:500px;"></div>
|
|
|
|
</div>
|
|
<!-- //页面内容 -->
|
|
<script>
|
|
drawchart();
|
|
|
|
function drawchart() {
|
|
|
|
chart = new Highcharts.Chart({
|
|
|
|
chart: {
|
|
|
|
renderTo: 'datachart',
|
|
|
|
type: 'spline'
|
|
|
|
},
|
|
|
|
title: {
|
|
|
|
text: 'Snow depth in the Vikjafjellet mountain, Norway'
|
|
|
|
},
|
|
|
|
subtitle: {
|
|
|
|
text: 'An example of irregular time data in Highcharts JS'
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
type: 'datetime',
|
|
|
|
dateTimeLabelFormats: { // don't display the dummy year
|
|
|
|
month: '%e. %b',
|
|
|
|
year: '%y'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
title: {
|
|
|
|
text: '温度(摄氏度)'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
|
|
formatter: function() {
|
|
|
|
return '<b>'+ this.series.name +'</b><br/>'+
|
|
|
|
Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
series: [{
|
|
|
|
name: 'Winter 2007-2008',
|
|
|
|
data: [
|
|
|
|
<?php
|
|
foreach ($this->data1 as $v)
|
|
{
|
|
echo "[".$v[0].",".$v[1]."],\r\n";
|
|
}
|
|
|
|
?>]
|
|
|
|
|
|
}, {
|
|
|
|
name: 'Winter 2008-2009',
|
|
|
|
data: [<?php
|
|
foreach ($this->data2 as $v)
|
|
{
|
|
echo "[".$v[0].",".$v[1]."],\r\n";
|
|
}
|
|
|
|
?>]
|
|
|
|
|
|
}]
|
|
});
|
|
|
|
/*
|
|
// Create the chart
|
|
window.chart = new Highcharts.Chart({
|
|
'chart' : {
|
|
'renderTo' : 'datachart'
|
|
},
|
|
|
|
'exporting': {
|
|
'enabled': false
|
|
},
|
|
|
|
'title' : {
|
|
'text' : title
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'datetime',
|
|
|
|
dateTimeLabelFormats: { // don't display the dummy year
|
|
|
|
month: '%e. %b',
|
|
|
|
year: '%b'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
'yAxis': {
|
|
labels: {
|
|
formatter: function() {
|
|
return (this.value > 0 ? '+' : '-') + this.value + '℃';
|
|
}
|
|
},
|
|
min: -20,
|
|
max:50
|
|
},
|
|
|
|
'series' : data
|
|
|
|
});
|
|
*/
|
|
}
|
|
|
|
</script>
|