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;
if(isset($this->data['chartjs']) && $this->data['chartjs']=='highstock')
	$theme->appendPlus($this,'highstock');
if($this->data['chartjs'] == 'highcharts')
	$theme->appendPlus($this,'highcharts');
$this->nav[] = array('link'=>"/data/visual",'title'=>'数据可视化');
?>
<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>
                </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
		}
	});

	<?php if(isset($this->data['chartjs']) && $this->data['chartjs']=='highstock') { ?>

	$('#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: $('#datachart').width() > 480
		},

		credits : {
			enabled : false
		},

		xAxis: {
			type: 'datetime'
		},

		tooltip : {
			formatter: function() {
			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>';
			});

			return s;
			}
		}

	});
	
	var chart = $('#datachart').highcharts();

	<?php } ?>

	<?php if($this->data['chartjs'] == 'highcharts') { ?>
	$('#datachart').highcharts({

		title: {
			text: '<?= $this->info['title'] ?>',
			x: -20 //center
		},

		credits : {
			enabled : false
		},

		xAxis: {
			type: 'datetime'
		},

		tooltip : {
			formatter: function () {
				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>';
				});

				return s;
			},
			shared: true
		}
	});

	var chart = $('#datachart').highcharts();
	<?php } ?>

	$(".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>