chart.js 图表可以做出这种效果吗？
我自己弄了下 效果马马虎虎.
<!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>
你的想法很好，实现起来有比较难啊。
一个canvas估计不行，你可以把原来的数据拆分成正负2组，分走的空位用0替换,弄2个canvas分别显示，之后负数那组的canvas做镜面垂直翻转。可能还要 css调整下,才能有那个效果。
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（4）
引用来自“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>我自己弄了下 效果马马虎虎.
<!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>你的想法很好，实现起来有比较难啊。
一个canvas估计不行，你可以把原来的数据拆分成正负2组，分走的空位用0替换,弄2个canvas分别显示，之后负数那组的canvas做镜面垂直翻转。可能还要 css调整下,才能有那个效果。