canvas绘制柱状图

1、HTML

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

     <title>06柱状图面向对象版本</title>

     <style>

         body {

             padding: 0;

             margin: 0;

             background-color: #f0f0f0;

             overflow: hidden;

         }

     </style>

     <script src="bower_components/konva/konva.min.js"></script>

     <script src="js/HistogramChart.js"></script>

 </head>

 <body>

     <div id="container">

     </div>

     <script>

         //创建舞台

         var stage = new Konva.Stage({

             container: 'container',

             width: window.innerWidth,//全屏

             height: window.innerHeight

         });

         //创建层

         var layer = new Konva.Layer();

         stage.add(layer);

         //中心点坐标

         var cenX = stage.width() / 2;

         var cenY = stage.height() / 2;

         //柱状图的数据

         var data = [

             { name: '前端', value: '.8', color: 'green'},

             { name: 'PHP', value: '.3', color: 'blue'},

             { name: 'Java', value: '.7', color: 'red'},

             { name: 'UI', value: '.9', color: 'orange'},

             { name: 'IOS', value: '.4', color: 'purple'},

             { name: 'Android', value: '.9', color: 'pink'}

         ];

         var h  = new HistogramChart({

             x: 1/8 * stage.width(),

             y: 3/4 * stage.height(),

             w: 3/4 * stage.width(),

             h: 1/2 * stage.height(),

             data: data

         });

         h.addToGroupOrLayer( layer );

         layer.draw();

         stage.on('contentClick', function(){

             h.playAnimate();

         });

     </script>

 </body>

 </html>

2、HistogramChart.js

 // Histogram：柱状图的意思 英 ['hɪstəgræm]  美 ['hɪstəɡræm]

 function HistogramChart( option ) {

     // zzt

     this._init( option );

     // JQJB:警情级别

 }

 HistogramChart.prototype = {

     _init: function( option ) {

         this.x = option.x || 0;

         this.y = option.y || 0; //柱状图的原点坐标

         this.w = option.w || 0; //柱状图的总宽度

         this.h = option.h || 0; //柱状图高度

         this.data = option.data || [];

         var x0 = 0;

         var y0 = 0;

         // 柱状图中所有的元素的组

         this.group = new Konva.Group({

             x: this.x,

             y: this.y

         });

         //放矩形的组

         this.rectGroup = new Konva.Group({

             x: 0,

             y: 0

         });

         this.group.add( this.rectGroup );

         //添加一个放百分比文字的组

         this.textPercentGroup = new Konva.Group({

             x: 0,

             y: 0

         });

         this.group.add( this.textPercentGroup );

         //初始化底线

         var bsLine = new Konva.Line({

             //x:从 1/8 x,  3/4

             //y: 3/4 高度处

             points: [x0,y0, x0+this.w, y0], //要求 底线按照画布的左上角顶点进行定位。

             strokeWidth: 1,

             stroke: 'lightgreen',

         });

         this.group.add( bsLine );

         var rectWidth = this.w / this.data.length; //每个矩形占用的总宽度

         var height = this.h;

         var self = this;// 当前柱状图的对象

         //初始化 矩形

         //初始化 文字%

         //初始化 底部文字

         this.data.forEach(function(item, index) {// item:数组中元素，index是索引值

             //生成一个矩形

             var rect = new Konva.Rect({

                 x: x0 + (1/4 + index ) * rectWidth,//

                 y: y0 - item.value * height,

                 width: 1/2 * rectWidth,

                 height: item.value * height,

                 fill: item.color,

                 opacity: .8,         //设置透明度

                 cornerRadius: 10,     //设置圆角

                 shadowBlur: 10,          //设置阴影的模糊级别

                 shadowColor: 'black',//设置阴影的颜色

                 // shadowOffsetX: 4, //设置阴影的X偏移量

                 // shadowOffsetY: 4     //设置应用的Y偏移量

             });

             self.rectGroup.add( rect );

             //把百分比的文字放到 柱状图的顶部

             var text = new Konva.Text({

                 x: x0 + (index ) * rectWidth,//

                 y: y0 - item.value * height - 14,

                 fontSize: 14,

                 text: item.value * 100 + '%',

                 fill: item.color,

                 width: rectWidth,// 配合让文字居中

                 align: 'center',  //

                 name: 'textPercent'  //设置文字的name后，可以通过类选择器进行选取。

             });

             self.textPercentGroup.add( text );

             //把百分比的文字放到 柱状图的顶部

             var textBottom = new Konva.Text({

                 x: x0 + (1/4 + index ) * rectWidth,//

                 y: y0,

                 fontSize: 14,

                 text: item.name,

                 fill: item.color,

                 // width: rectWidth,// 配合让文字居中

                 // align: 'center',  //

                 rotation: 30

             });

             self.group.add( textBottom );

         });

     },

     addToGroupOrLayer: function( arg ) {

         arg.add( this.group );

     },

     playAnimate: function() {

         var self = this;

         // 让柱状图 y→ y0  height：0

         this.rectGroup.getChildren().each(function(item, index){

             item.y(0);

             item.height(0);

             //经过一个动画还原

             item.to({

                 duration: 1,

                 y: - self.data[index].value * self.h,

                 height: self.data[index].value * self.h

             });

         });

         //让文字有个动画

         this.textPercentGroup.getChildren().each(function( item, index ){

             item.y(-14);

             item.to({

                 duration: 1,

                 y: - self.data[index].value * self.h -14

             });

         });

     }

 }

运行效果：

第167天：canvas绘制柱状图的更多相关文章

  1. 【带着canvas去流浪】（1）绘制柱状图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...

  2. 带着canvas去流浪系列之一：绘制柱状图

    [摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  8. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. 20155323 第三次实验 敏捷开发与XP实践

    20155323 第三次实验 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器 ...

  2. # 20155337 2016-2017-2 《Java程序设计》第九周学习总结

    20155337 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第16章 JDBC(Java DataBase Connectivity)即java数据库连 ...

  3. 使用Python进行分布式系统协调 (ZooKeeper/Consul/etcd)

    来源:naughty 链接:my.oschina.net/taogang/blog/410864 笔者之前的博文提到过,随着大数据时代的到来,分布式是解决大数据问题的一个主要手段,随着越来越多的分布式 ...

  4. 【LG3206】[HNOI2010]城市建设

    [LG3206][HNOI2010]城市建设 题面 洛谷 题解 有一种又好想.码得又舒服的做法叫线段树分治+\(LCT\) 但是因为常数过大,无法跑过此题. 所以这里主要介绍另外一种玄学\(cdq\) ...

  5. spring 缓存机制

    简介 Spring3.1开始引入了基于注释的缓存,其使用方法和原理类似于Spring对事务管理的支持.可以对容器中的任意的bean或bean的方法添加缓存.   配置Spring缓存 Spring缓存 ...

  6. golang 单元测试

    单元测试是质量保证十分重要的一环,好的单元测试不仅能及时地发现问题,更能够方便地调试,提高生产效率.所以很多人认为写单元测试是需要额外的时间,会降低生产效率,是对单元测试最大的偏见和误解. go 语言 ...

  7. Android开发笔记——ListView模块、缓存及性能

    ListView是Android开发中最常用的组件之一.本文将重点说明如何正确使用ListView,以及使用过程中可能遇到的问题. ListView开发模块 图片缓存 可能遇到的问题 一.ListVi ...

  8. Android Studio 3.1.2 Device File Explorer nothing to show

    Android Studio 3.1.2 Device File Explorer nothing to  show 不显示 目录  ,空白 手持终端设备: Android  4.2.2  ,API1 ...

  9. [备忘]Windows Server 2008 R2部署FTP FileZilla Server防火墙设置

    有一台服务器,之前文件迁移少,现准备用FileZilla Server当FTP服务器,服务器系统是Windows Server 2008 R2,同样适用FileZilla Client连接服务器FTP ...

  10. Migrating to WebSphere 9

    Migrating to WebSphere 9 Make a migration plan Requirements Migrate WebSphere profiles into the new ...