diff --git a/application/default/controllers/VisualController.php b/application/default/controllers/VisualController.php
index eb4b8ca1..3c6e2b14 100644
--- a/application/default/controllers/VisualController.php
+++ b/application/default/controllers/VisualController.php
@@ -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);
diff --git a/application/default/views/scripts/visual/view-highcharts.phtml b/application/default/views/scripts/visual/view-highcharts.phtml
new file mode 100644
index 00000000..a7752635
--- /dev/null
+++ b/application/default/views/scripts/visual/view-highcharts.phtml
@@ -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>
\ No newline at end of file
diff --git a/application/default/views/scripts/visual/view.phtml b/application/default/views/scripts/visual/view.phtml
index 2c64aa18..de8d41b9 100644
--- a/application/default/views/scripts/visual/view.phtml
+++ b/application/default/views/scripts/visual/view.phtml
@@ -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>';
diff --git a/application/models/Theme.php b/application/models/Theme.php
index 99425ea9..04e7b99e 100644
--- a/application/models/Theme.php
+++ b/application/models/Theme.php
@@ -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'
 				)
 			),
 			
diff --git a/application/module/Westdc/Visual/Record.php b/application/module/Westdc/Visual/Record.php
index 80f693be..fe7c05ea 100644
--- a/application/module/Westdc/Visual/Record.php
+++ b/application/module/Westdc/Visual/Record.php
@@ -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}";