修改数据可视化页面js效果

application/default/views/scripts/visual/view.phtml

@@ -13,10 +13,20 @@ $this->breadcrumb()->setSeparator(' > ');
     <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>
+        <div class="row-fluid">
-        	<button type="button" class="btn" value="column">柱状图</button>
+        	<div class="span6">
-        </div>
+                <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']);?>
@@ -27,25 +37,35 @@ $this->breadcrumb()->setSeparator(' > ');
         <?php } ?>
   
     </div>
-    
+</div>
+<div class="row-fluid">
     <!-- 页面内容 -->
     <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';
+_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 : {
@@ -57,9 +77,33 @@ $(function() {
 			  enabled : false
 		  },
 		  
-		  xAxis : {
+		  xAxis: {
-			  allowDecimals : true  
+        	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;
+			}
+		  },
+		  
+		  
 		  
 	});
 	
@@ -71,12 +115,14 @@ $(function() {
 		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;
 			}
 		}
@@ -96,6 +142,12 @@ $(function() {
 						forced: false,
 					}
 				});
+				
+				$(_btn).removeAttr('disabled');
+				$(_btn).addClass('active');
+			},
+			beforeSend: function(){
+				$(_btn).attr('disabled','disabled');
 			},
 			'timeout': 30000,
 			'global' : true
@@ -120,4 +172,5 @@ $( document ).ajaxSend(function() {
 $( document ).ajaxSend(function() {
 	$('#loading').css('display','none');
 });
+
 </script>