westdc-zf1/application/default/views/scripts/visual/view-highcharts.phtml

<?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>