westdc-zf1/application/default/views/scripts/visual/view.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(' > ');
$this->nav[] = array('link'=>"/data/visual",'title'=>'可视化数据列表');
?>
<div class="row">
    <div class="span12">
        <h3><?= $this->info['title'] ?> <small>数据可视化查看</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 active" value="line">折线图</button>
                    <button type="button" class="btn" value="column">柱状图</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 = (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>
<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').click(function(e) {
        _this.linetype = $(this).val();
    });
	
	Highcharts.setOptions({
		lang: {
			months : [ '一月', '二月', '三月', '四月', '五月', '六月',  '七月', '八月', '九月', '十月', '十一月', '十二月'],
			//months : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
			weekdays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
		},
		global: {
			useUTC: _this.utctimezone
		}
	});
	
	$('#datachart').highcharts('StockChart', {
		
		  rangeSelector : {
			  selected : 1,
			  inputEnabled: $('#container').width() > 480
		  },
		  
		  credits : {
			  enabled : false
		  },
		  
		  xAxis: {
        	type: 'datetime',
        	dateTimeLabelFormats: {
				second: '%Y-%m-%d<br/>%H:%M:%S',
				minute: '%Y-%m-%d<br/>%H:%M',
				hour: '%Y-%m-%d<br/>%H:%M',
				day: '%Y<br/>%m-%d',
				week: '%Y<br/>%m-%d',
				month: '%Y-%m',
				year: '%Y'
			},
			
		  },
		  
		  tooltip : {
			 formatter: function() {
				var s = '<b>'+ Highcharts.dateFormat('%Y-%m-%d %A %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>';
				});
            
				return s;
			}
		  },
		  
		  
		  
	});
	
	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 + '&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,
					}
				});
				
				$(_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>