bob
/
westdc-zf1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加highcharts专门查看页面，增加category可视化功能，前台调用改用id顺序号

This commit is contained in:
wlx 2015-01-22 01:21:29 +00:00
parent ad6a880544
commit 80926fb353
5 changed files with 189 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/default/controllers/VisualController.php
View File

@ -82,6 +82,8 @@ class VisualController extends Zend_Controller_Action
$this->view->data = $visual->getVisualVars($uuid);
if ($this->view->data['chartjs']=='highcharts') $this->_helper->viewRenderer('view-highcharts');
if(empty($this->view->data))
{
view::Post($this,"此数据不支持可视化",-1);

165
application/default/views/scripts/visual/view-highcharts.phtml Normal file
View File

@ -0,0 +1,165 @@
<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle()->setSeparator(' - ');
$theme = new Theme;
$theme->appendPlus($this,'highcharts');
$this->nav[] = array('link'=>"/data/visual",'title'=>'数据可视化');
?>
<?= $this->render('breadcrumbs.phtml'); ?>
<div class="row">
<div class="span12">
<h3><?= $this->info['title'] ?> <small><a href="/data/<?= $this->info['uuid'] ?>">查看元数据</a></small></h3>
<h4><small>请在需要查看的可视化要素上点击以描绘图表，再次点击可取消显示，绘制图像前可自主选择图像类型</small></h4>
<div class="row-fluid">
<div class="span6">
<div class="btn-group linetypes" data-toggle="buttons-radio">
<button type="button" class="btn<?= (isset($this->data['charttype']) && $this->data['charttype'] == 'line') || empty($this->data['charttype']) ? " active":"" ?>" value="line">折线图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'column' ? " active":"" ?>" value="column">柱状图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'spline' ? " active":"" ?>" value="spline">样条线图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'area' ? " active":"" ?>" value="area">面积图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'scatter' ? " active":"" ?>" value="scatter">散点图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'bubble' ? " active":"" ?>" value="bubble">Bubble</button>
</div>
</div>
<div class="span6 text-right">
<a class="btn btn-primary control-btn-cls" href="javascript:void(0);">
清除图像
</a>
</div>
</div>
<hr />
<?php $vars = json_decode($this->data['variable'],true);?>
<?php foreach($vars as $k=>$v) { ?>
<a class="btn btn-default control-btn" href="javascript:void(0);" data-subdataset="<?= $k ?>" data-seriename="<?= $v['title'] ?>">
<?= $v['title'] ?>
</a>
<?php } ?>
</div>
</div>
<div class="row-fluid">
<!-- 页面内容 -->
<div class="span12">
<div id="datachart" style="width:100%;height:500px;"></div>
</div>
<!-- //页面内容 -->
</div>
<script>
_this = {};
_this.linetype = 'line';
_this.utctimezone = false;
$(function() {
$('.linetypes button').each(function(){
if($(this).hasClass('active'))
{
_this.linetype = $(this).val();
}
});
$('.linetypes button').click(function(e) {
_this.linetype = $(this).val();
});
Highcharts.setOptions({
lang: {
months : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
weekdays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
},
global: {
useUTC: _this.utctimezone
}
});
$('#datachart').highcharts({
title: {
text: '<?= $this->info['title'] ?>',
x: -20 //center
},
credits : {
enabled : false
},
xAxis: {
type: '<?= ($this->data['xaxis']=='category')?'category':'datetime' ?>'
},
tooltip : {
shared: 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');
_btn = this;
for(i in chart.series)
{
if(chart.series[i].name == seriename)
{
chart.series[i].remove();
$(_btn).removeClass('active');
return;
}
}
$.ajax({
'url': '/visual/data',
'data': 'uuid=' + uuid + '&subdataset=' + subdataset,
'method': 'GET',
'dataType': 'json',
'success': function(data){
chart.addSeries({
name: seriename,
data: data,
type : _this.linetype,
dataGrouping: {
enabled: false,
forced: false
}
});
$(_btn).removeAttr('disabled');
$(_btn).addClass('active');
},
beforeSend: function(){
$(_btn).attr('disabled','disabled');
},
'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>

26
application/default/views/scripts/visual/view.phtml
View File

@ -7,22 +7,21 @@ if(isset($this->data['chartjs']) && $this->data['chartjs']=='highstock')
$theme->appendPlus($this,'highstock');
if($this->data['chartjs'] == 'highcharts')
$theme->appendPlus($this,'highcharts');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">数据与服务</a>');
$this->breadcrumb('数据可视化');
$this->breadcrumb()->setSeparator(' > ');
$this->nav[] = array('link'=>"/data/visual",'title'=>'可视化数据列表');
$this->nav[] = array('link'=>"/data/visual",'title'=>'数据可视化');
?>
<?= $this->render('breadcrumbs.phtml'); ?>
<div class="row">
<div class="span12">
<h3><?= $this->info['title'] ?> <small>数据可视化查看</small></h3>
<h3><?= $this->info['title'] ?> <small><a href="/data/<?= $this->info['uuid'] ?>">查看元数据</a></small></h3>
<h4><small>请在需要查看的可视化要素上点击以描绘图表，再次点击可取消显示，绘制图像前可自主选择图像类型</small></h4>
<div class="row-fluid">
<div class="span6">
<div class="btn-group linetypes" data-toggle="buttons-radio">
<button type="button" class="btn<?= (isset($this->data['visual_type']) && $this->data['visual_type'] == 'line') || empty($this->data['visual_type']) ? " active":"" ?>" value="line">折线图</button>
<button type="button" class="btn<?= isset($this->data['visual_type']) && $this->data['visual_type'] == 'column' ? " active":"" ?>" value="column">柱状图</button>
<button type="button" class="btn<?= (isset($this->data['charttype']) && $this->data['charttype'] == 'line') || empty($this->data['charttype']) ? " active":"" ?>" value="line">折线图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'column' ? " active":"" ?>" value="column">柱状图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'spline' ? " active":"" ?>" value="spline">样条线图</button>
<button type="button" class="btn<?= isset($this->data['charttype']) && $this->data['charttype'] == 'area' ? " active":"" ?>" value="area">面积图</button>
</div>
</div>
<div class="span6 text-right">
@ -33,10 +32,10 @@ $this->nav[] = array('link'=>"/data/visual",'title'=>'可视化数据列表');
</div>
<hr />
<?php $vars = (new \Westdc\Visual\VariableEncoder)->normaldecode($this->data['variable']);?>
<?php $vars = json_decode($this->data['variable'],true);?>
<?php foreach($vars as $k=>$v) { ?>
<a class="btn btn-default control-btn" href="javascript:void(0);" data-subdataset="<?= $v['name'] ?>" data-seriename="<?= $v['title'] ?>">
<a class="btn btn-default control-btn" href="javascript:void(0);" data-subdataset="<?= $k ?>" data-seriename="<?= $v['title'] ?>">
<?= $v['title'] ?>
</a>
<?php } ?>
@ -82,8 +81,9 @@ $(function() {
$('#datachart').highcharts('StockChart', {
rangeSelector : {
buttons: [{type:'hour',count:1,text:'1h'},{type:'day',count:1,text:'1D'},{type:'month',count:1,text:'1m'},{type:'year',count:1,text:'1Y'},{type:'all',count:1,text:'All'}],
selected : 1,
inputEnabled: $('#container').width() > 480
inputEnabled: $('#datachart').width() > 480
},
credits : {
@ -96,7 +96,7 @@ $(function() {
tooltip : {
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%Y-%m-%d %A %H:%M:%S', this.x) +'</b>';
var s = '<b>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'</b>';
$.each(this.points, function(i, point) {
s += '<br /><span style="color: '+point.series.color+';">' + point.series.name + ': ' + point.y +'</span>';
@ -130,7 +130,7 @@ $(function() {
tooltip : {
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%Y-%m-%d %A %H:%M:%S', this.x) + '</b>';
var s = '<b>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/><span style="color: '+ this.series.color+';">' + this.series.name + ': ' + this.y + '</span>';

3
application/models/Theme.php
View File

@ -139,7 +139,8 @@ class Theme
'highcharts' => array(
$this->ScriptKey => array(
'/js/lib/highcharts/highcharts.js'
'/js/lib/highcharts/highcharts.js',
'/js/lib/highcharts/highcharts-more.js'
)
),

12
application/module/Westdc/Visual/Record.php
View File

@ -4,7 +4,7 @@ namespace Westdc\Visual;
class Record extends Database
{
public $subdataset,$valueFilter,$vars,$uuid,$xaxis;
public $subdataset,$valueFilter,$vars,$uuid,$xaxis,$field;
private $sql;
function __construct($uuid,$identifier )
@ -29,7 +29,9 @@ class Record extends Database
$this->vars = $var_data['variable'];
$this->xaxis=$var_data['xaxis'];
$json=json_decode($this->vars,true);
$subvar=array_filter($json,function($sub) { return $sub['name']==$this->subdataset; });
//$subvar=array_filter($json,function($sub) { return $sub['name']==$this->subdataset; });
$subvar=$json[$this->subdataset];
$this->field=$subvar['name'];
if (isset($subvar['sql']) && !empty($subvar['sql']))
$this->sql=$this->makeSql($subvar['sql']);
elseif(isset($var_data['data']) && !empty($var_data['data']))
@ -54,8 +56,8 @@ class Record extends Database
$data = [];
while($row = $rs->fetch(\PDO::FETCH_ASSOC))
{
$row['utctime'] = $this->utcMsTime(strtotime($row['utctime']));
if ($this->xaxis!='category')
$row[$this->xaxis] = $this->utcMsTime(strtotime($row[$this->xaxis]));
//var_dump($row);
$t=[];
foreach($row as $k=>$v)
@ -83,7 +85,7 @@ class Record extends Database
}
}
$sql = "SELECT {$this->xaxis},{$this->subdataset}
$sql = "SELECT {$this->xaxis},{$this->field}
FROM ($table) as tbl
$wheresql
ORDER BY {$this->xaxis}";