chart.js 柱状图效果

孟孟子 发布于 2014/04/10 11:41
阅读 9K+
收藏 0
chart.js  图表可以做出这种效果吗?
加载中
0
char1st
char1st

一个canvas估计不行,你可以把原来的数据拆分成正负2组,分走的空位用0替换,弄2个canvas分别显示,之后负数那组的canvas做镜面垂直翻转。可能还要 css调整下,才能有那个效果。

0
孟孟子

你的想法很好,实现起来有比较难啊。

0
char1st
char1st

我自己弄了下 效果马马虎虎.

<!doctype html>
<html>
	<head>
		<title>Bar Chart</title>
		<script src="../Chart.js"></script>
		<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
		<style>
			canvas{
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" height="200" width="1000"></canvas>
		<canvas width="1000" height="200" id="canvas1" style="margin-top: -50px;"></canvas>

	<script>
	
		var arr=[65,-59,90,-81,56,-55,40];
		var arr1=[65,-59,90,-81,56,-55,40];
	
		 for(var i=0;i<arr.length;i++){
			if(arr[i]<0)
			arr.splice(i,1,0);
		 }
		 for(var i=0;i<arr1.length;i++){
			if(arr1[i]>0)
			arr1.splice(i,1,0);
			else
			arr1.splice(i,1,-arr1[i]);
		 }
		
	
		var barChartData = {
			labels : ["","","","","","",""],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					data : arr
				}
			]
			
		}

				var barChartData1 = {
			labels : ["","","","","","",""],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					data : arr1
				}
			]
			
		}
	var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
		var canvas1=document.getElementById("canvas1");
	var context=canvas1.getContext("2d");
	var myLine1 = new Chart(context).Bar(barChartData1);
	 context.translate(0, canvas1.height);
		context.scale(1, -1);
	</script>
	</body>
</html>




0
孟孟子

引用来自“char1st”的评论

我自己弄了下 效果马马虎虎.

<!doctype html>
<html>
	<head>
		<title>Bar Chart</title>
		<script src="../Chart.js"></script>
		<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
		<style>
			canvas{
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" height="200" width="1000"></canvas>
		<canvas width="1000" height="200" id="canvas1" style="margin-top: -50px;"></canvas>

	<script>
	
		var arr=[65,-59,90,-81,56,-55,40];
		var arr1=[65,-59,90,-81,56,-55,40];
	
		 for(var i=0;i<arr.length;i++){
			if(arr[i]<0)
			arr.splice(i,1,0);
		 }
		 for(var i=0;i<arr1.length;i++){
			if(arr1[i]>0)
			arr1.splice(i,1,0);
			else
			arr1.splice(i,1,-arr1[i]);
		 }
		
	
		var barChartData = {
			labels : ["","","","","","",""],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					data : arr
				}
			]
			
		}

				var barChartData1 = {
			labels : ["","","","","","",""],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					data : arr1
				}
			]
			
		}
	var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
		var canvas1=document.getElementById("canvas1");
	var context=canvas1.getContext("2d");
	var myLine1 = new Chart(context).Bar(barChartData1);
	 context.translate(0, canvas1.height);
		context.scale(1, -1);
	</script>
	</body>
</html>




非常感觉。

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部