123 lines
3.2 KiB
PHTML
123 lines
3.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><?= $this->info['title'] ?> <small>数据可视化查看</small></h3>
|
|
<h4><small>请在需要查看的可视化要素上点击以描绘图表，再次点击可取消显示，绘制图像前可自主选择图像类型</small></h4>
|
|
<div class="btn-group linetypes" data-toggle="buttons-radio">
|
|
<button type="button" class="btn active" value="line">折线图</button>
|
|
<button type="button" class="btn" value="column">柱状图</button>
|
|
</div>
|
|
<hr />
|
|
|
|
<?php $vars = (new \Westdc\Visual\VariableEncoder)->normaldecode($this->data['vars']);?>
|
|
<?php foreach($vars as $k=>$v) { ?>
|
|
<a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="<?= $v['dataset'] ?>" data-subdataset="<?= $v['subdataset'] ?>" data-seriename="<?= $v['seriename'] ?>">
|
|
<?= $v['seriename'] ?>
|
|
</a>
|
|
<?php } ?>
|
|
|
|
</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 = {};
|
|
_this.linetype = 'line';
|
|
$(function() {
|
|
|
|
$('.linetypes button').click(function(e) {
|
|
_this.linetype = $(this).val();
|
|
});
|
|
|
|
$('#datachart').highcharts('StockChart', {
|
|
|
|
rangeSelector : {
|
|
selected : 1,
|
|
inputEnabled: $('#container').width() > 480
|
|
},
|
|
|
|
credits : {
|
|
enabled : false
|
|
},
|
|
|
|
xAxis : {
|
|
allowDecimals : true
|
|
}
|
|
|
|
});
|
|
|
|
var chart = $('#datachart').highcharts();
|
|
|
|
$(".control-btn").click(function(){
|
|
|
|
uuid = '<?= $this->info['uuid'] ?>';
|
|
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': 'uuid=' + uuid + '&dataset=' + dataset + '&subdataset=' + subdataset,
|
|
'method': 'GET',
|
|
'dataType': 'json',
|
|
'success': function(data){
|
|
chart.addSeries({
|
|
name: seriename,
|
|
data: data,
|
|
type : _this.linetype,
|
|
dataGrouping: {
|
|
enabled: false,
|
|
forced: false,
|
|
}
|
|
});
|
|
},
|
|
'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>
|