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. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  2. 20155233 《Java程序设计》 实验三 敏捷开发与XP实践

    20155233 <Java程序设计> 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤与内容 1.在IDEA中使用工具(Code->Reformat ...

  3. jdk各种老版本的下载链接

    java SE 1.6各个版本 jdk  api http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downlo ...

  4. [arc082E]ConvexScore-[凸包]

    Description 传送门 Solution em又是神仙题. 考虑到目前的一个凸包,顶点点集为S. 现在在它内部或边缘上的点集为T,则贡献为2|T|−|S|,设从T中去掉S的点后得到了集合A.则 ...

  5. 在azure windows虚拟机上安装iis

    在 dashboard-添加角色和功能-一直往下点就好了,后”选择安装类型“页面 中选择[基于角色或基于功能的安装],安装完成后 在浏览器输入 http://localhost/ 就可以正常访问网站了 ...

  6. cf 448c Painting Fence

    http://codeforces.com/problemset/problem/448/C 题目大意:给你一个栅栏,每次选一横排或竖排染色,求把全部染色的最少次数,一个点不能重复染色. 和这道题有点 ...

  7. WPF DataGridTable

    由于项目要显示表头合并,而数据源列随时变更,又不想重复的画表格,就实现动态数据(dynamic)绑定和配置数据列模板的方式 编辑DataGridColumnHeader样式实现表头合并:效果如下 实现 ...

  8. 搞懂.NET Framework 历史版本（2017年）

    最近被.NET平台各种名词.以及各种版本弄得有些疑惑,开发和部署,对于开发平台版本选择是个基本问题,因此,花了些时间,学习汇总了有关.NET版本演进的历史. .NET简介 这个平台相信我们都知道,不过 ...

  9. 使用phpMyAdmin管理网站数据库(创建、导入、导出…)

    作为一名站长,最重视的就是网站的数据安全了.本节襄阳网站优化就来讲讲如何使用phpMyAdmin管理软件进行mysql数据库的管理,实现基本的数据库管理用户.数据库的创建.数据的导入和导出操作(网站备 ...

  10. VR中射线点击按钮的实现

    VR中实现UI的Button点击,主要是需要实现IPointerClickHandler接口,因为在Unity将所有的按钮操作都封装成了相应的接口,需要相应的功能只需要去实现对应的接口就好了.在这里我 ...