前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第167天:canvas绘制柱状图

第167天:canvas绘制柱状图

作者头像
半指温柔乐
发布2018-09-11 09:55:04
1.4K0
发布2018-09-11 09:55:04
举报
文章被收录于专栏:前端知识分享

canvas绘制柱状图

1、HTML

代码语言:javascript
复制
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 6     <title>06柱状图面向对象版本</title>
 7     <style>
 8         body {
 9             padding: 0;
10             margin: 0;
11             background-color: #f0f0f0;
12             overflow: hidden;
13         }
14     </style>
15     <script src="bower_components/konva/konva.min.js"></script>
16     <script src="js/HistogramChart.js"></script>
17     
18 </head>
19 <body>
20     <div id="container">
21     </div>
22 
23     <script>
24         //创建舞台
25         var stage = new Konva.Stage({
26             container: 'container',
27             width: window.innerWidth,//全屏
28             height: window.innerHeight
29         });
30 
31         //创建层
32         var layer = new Konva.Layer();
33         stage.add(layer);
34     
35         //中心点坐标
36         var cenX = stage.width() / 2;
37         var cenY = stage.height() / 2;
38 
39         //柱状图的数据
40         var data = [
41             { name: '前端', value: '.8', color: 'green'},
42             { name: 'PHP', value: '.3', color: 'blue'},
43             { name: 'Java', value: '.7', color: 'red'},
44             { name: 'UI', value: '.9', color: 'orange'},
45             { name: 'IOS', value: '.4', color: 'purple'},
46             { name: 'Android', value: '.9', color: 'pink'}
47         ];
48 
49 
50         var h  = new HistogramChart({
51             x: 1/8 * stage.width(),
52             y: 3/4 * stage.height(),
53             w: 3/4 * stage.width(),
54             h: 1/2 * stage.height(),
55             data: data
56         });
57 
58         h.addToGroupOrLayer( layer );
59 
60         layer.draw();
61 
62         stage.on('contentClick', function(){
63             h.playAnimate();
64         });
65 
66         
67     </script>
68 
69 
70 </body>
71 </html>

2、HistogramChart.js

代码语言:javascript
复制
  1 // Histogram:柱状图的意思 英 ['hɪstəgræm]  美 ['hɪstəɡræm]
  2 function HistogramChart( option ) {
  3     // zzt
  4     this._init( option );
  5     // JQJB:警情级别
  6 }
  7 
  8 HistogramChart.prototype = {
  9     _init: function( option ) {
 10         this.x = option.x || 0;
 11         this.y = option.y || 0; //柱状图的原点坐标
 12         this.w = option.w || 0; //柱状图的总宽度
 13         this.h = option.h || 0; //柱状图高度
 14 
 15         this.data = option.data || [];
 16 
 17         var x0 = 0;
 18         var y0 = 0;
 19 
 20         // 柱状图中所有的元素的组
 21         this.group = new Konva.Group({
 22             x: this.x,
 23             y: this.y
 24         });
 25 
 26         //放矩形的组
 27         this.rectGroup = new Konva.Group({
 28             x: 0,
 29             y: 0
 30         });
 31         this.group.add( this.rectGroup );
 32 
 33         //添加一个放百分比文字的组
 34         this.textPercentGroup = new Konva.Group({
 35             x: 0,
 36             y: 0
 37         });
 38         this.group.add( this.textPercentGroup );
 39 
 40         //初始化底线
 41         var bsLine = new Konva.Line({
 42             //x:从 1/8 x,  3/4
 43             //y: 3/4 高度处
 44             points: [x0,y0, x0+this.w, y0], //要求 底线按照画布的左上角顶点进行定位。
 45             strokeWidth: 1,
 46             stroke: 'lightgreen',
 47         });
 48 
 49         this.group.add( bsLine );
 50 
 51         var rectWidth = this.w / this.data.length; //每个矩形占用的总宽度
 52         var height = this.h;
 53 
 54 
 55         var self = this;// 当前柱状图的对象
 56         //初始化 矩形
 57         //初始化 文字%
 58         //初始化 底部文字
 59         this.data.forEach(function(item, index) {// item:数组中元素,index是索引值
 60             //生成一个矩形
 61             var rect = new Konva.Rect({
 62                 x: x0 + (1/4 + index ) * rectWidth,//
 63                 y: y0 - item.value * height,
 64                 width: 1/2 * rectWidth,
 65                 height: item.value * height,
 66                 fill: item.color,
 67                 opacity: .8,         //设置透明度
 68                 cornerRadius: 10,     //设置圆角
 69                 shadowBlur: 10,          //设置阴影的模糊级别
 70                 shadowColor: 'black',//设置阴影的颜色
 71                 // shadowOffsetX: 4, //设置阴影的X偏移量
 72                 // shadowOffsetY: 4     //设置应用的Y偏移量
 73             });
 74             self.rectGroup.add( rect );
 75 
 76             //把百分比的文字放到 柱状图的顶部
 77             var text = new Konva.Text({
 78                 x: x0 + (index ) * rectWidth,//
 79                 y: y0 - item.value * height - 14,
 80                 fontSize: 14,
 81                 text: item.value * 100 + '%',
 82                 fill: item.color,
 83                 width: rectWidth,// 配合让文字居中
 84                 align: 'center',  //
 85                 name: 'textPercent'  //设置文字的name后,可以通过类选择器进行选取。
 86             });
 87             self.textPercentGroup.add( text );
 88 
 89             //把百分比的文字放到 柱状图的顶部
 90             var textBottom = new Konva.Text({
 91                 x: x0 + (1/4 + index ) * rectWidth,//
 92                 y: y0,
 93                 fontSize: 14,
 94                 text: item.name,
 95                 fill: item.color,
 96                 // width: rectWidth,// 配合让文字居中
 97                 // align: 'center',  //
 98                 rotation: 30
 99             });
100             self.group.add( textBottom );
101         });
102     },
103     addToGroupOrLayer: function( arg ) {
104         arg.add( this.group );
105     },
106     playAnimate: function() {
107         var self = this;
108         // 让柱状图 y→ y0  height:0
109         this.rectGroup.getChildren().each(function(item, index){
110             item.y(0);
111             item.height(0);
112             //经过一个动画还原
113             item.to({
114                 duration: 1,
115                 y: - self.data[index].value * self.h,
116                 height: self.data[index].value * self.h
117             });
118         });
119         //让文字有个动画
120         this.textPercentGroup.getChildren().each(function( item, index ){
121             item.y(-14);
122             item.to({
123                 duration: 1,
124                 y: - self.data[index].value * self.h -14
125             });
126         });
127     }
128 }

运行效果:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-02-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • canvas绘制柱状图
    • 1、HTML
      • 2、HistogramChart.js
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档