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. 20155310 《Java程序设计》实验三（敏捷开发与XP实践）实验报告

    20155310 <Java程序设计>实验三(敏捷开发与XP实践)实验报告 实验内容 1.XP基础 2.XP核心实践 3.相关工具 实验步骤 (一)敏捷开发与XP 1.敏捷开发 敏捷开发( ...

  2. 20155316 2016-2017-2 《Java程序设计》第9周学习总结

    教材学习内容总结 课堂学习内容 不要上帝类,设计小类 soild设计 开放封闭原则:对扩充开放,对修改封闭 OOD方案 DIP 基耦合 教材学习内容 JDBC架构 交易与隔离层级 RowSet .cl ...

  3. 《Java 程序设计》课堂实践二

    题目 设计并实现一个Book类,定义义成Book.java,Book 包含书名,作者,出版社和出版日期,这些数据都要定义getter和setter.定义至少三个构造方法,接收并初始化这些数据.覆盖(O ...

  4. 虚拟机安装&Linux初探

    学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 安装虚拟机的过程还算顺利.除了在安装增强设备功能时需要将之前的硬盘弹出之外,没有遇到其他的问题. 通过实 ...

  5. 20145234黄斐《java程序设计》第三周

    教材学习内容总结 类与对象 定义:对象,与过程相对. Java中变量有2种类型,一个是基本类型,另一个则是类类型.基本类型在之前学过,本次学习类类型.使用Java撰写程序几乎都是在使用对象,要产生对象 ...

  6. 深入浅出之-route命令实战使用指南

    本博文的视频讲解已发布:http://oldboy.blog.51cto.com/2561410/1119453 缘起:本文为老男孩linux培训第七次课前考试题及参考答案,有朋友在看完http:// ...

  7. JS基础，课堂作业，三个数字排序

    三个数字大小排序 <script> var a = parseInt(prompt("请输入第一个整数:")); var b = parseInt(prompt(&qu ...

  8. Zigbee系列（网络）

    Zigbee设备类型 Coordinator:形成网络,选择信道.PANID.允许其他设备加入等. Router: 作为路由节点,转发报文. End Device: 终端节点,不转发报文. Zigbe ...

  9. ubuntu apt-xxx

    1. apt-get install xxx 2. dpkg -l ; list software already installed. 3. apt-cache dumpavail ; print ...

  10. Fulfilling Work: The Shippers More entrepreneurs hire 'fulfillment' outfits to store and ship their products

    By Stu Woo June 23, 2011 Brett Teper faced a logistical problem when he and a partner founded ModPro ...