#Canvas-04-柱状图 
##代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>36柱状图案例</title> <style> body { padding: 0; margin: 0; background-color: #f0f0f0; overflow: hidden; } </style> <script src="https://my.oschina.net//u/3502365/blog/1154599/konva.js"></script> <script src="js/KonvaExtend.js" charset="utf-8"></script> </head> <body> <div id="container"> </div>
1 <script> 2 var stage = new Konva.Stage({ 3 container: 'container', 4 width: window.innerWidth, 5 height: window.innerHeight 6 }); 7 8 9 var layer = new Konva.Layer(); 10 stage.add(layer); 11 12 var cenX = stage.width() / 2; 13 var cenY = stage.height() / 2; 14 15 var data = [ 16 { name: '百度', value: .2, color: 'blue' }, 17 { name: '阿里', value: .4, color: 'red' }, 18 { name: '新浪', value: .1, color: 'purple' }, 19 { name: '搜狐', value: .1, color: 'navy' }, 20 { name: '360', value: .2, color: 'orange' } 21 ]; 22 23 var his = new Histogram({ 24 data: data, 25 x: 1/8 * stage.width(), 26 y: 3/4 * stage.height(), 27 blWidth: 2, 28 blColor: 'lightblue', 29 width: 3/4 * stage.width(), 30 height: 1/3 * stage.height(), 31 fontSize: 14 32 }); 33 his.addToGroupOrLayer(layer); 34 layer.draw(); 35 his.playAnimate(); 36 37 layer.on('click',function(){ 38 his.playAnimate(); 39 }); 40 </script> 41 </body> 42 </html>