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. 20155220 实验三 敏捷开发与XP实践 实验报告

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

  2. String类使用

    String类的使用 String类 String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.java把String类声明的final类,不能有类.S ...

  3. 20155327 2016-2017-2 《Java程序设计》第一周学习总结

    20155327 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 浏览教材,根据自己的理解每章提出一个问题 1.JAVA SE中JVM,JRE与JDK分别是什 ...

  4. day5 页面布局

    1.主站 <div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> ...

  5. 电信NB-IOT的温湿度采集器开发记录

    1. 首先打开浏览器,登录电信商用服务器,上传profile文件 2. 上传编解码插件在,注意的是,上传编解码插件是电信测试用服务器平台(不同的网址),反正不明白电信搞啥幺蛾子,得两个地方去上传 3. ...

  6. Maven学习(八)-----Maven依赖机制

    Maven依赖机制 在 Maven 依赖机制的帮助下自动下载所有必需的依赖库,并保持版本升级. 案例分析 让我们看一个案例研究,以了解它是如何工作的.假设你想使用 Log4j 作为项目的日志.这里你要 ...

  7. .net core 部署 Docker 所遇到的几个问题

    1.Connection reset by peer 造成这个问题的主要原因是在program.cs 文件中,未加入端口: public static IWebHostBuilder CreateWe ...

  8. java 中的字符串

    创建String对象 String s1="xxx"://创建一个字符串对象“xxx”,名为s1; String s2=new String();//创建一个空字符串对象,名为S2 ...

  9. R之RMySQL

    linux,mysql和R的版本信息: Linux naci 3.19.0-16-generic #16-Ubuntu SMP Server version: 5.6.24-0ubuntu2 (Ubu ...

  10. ab命令做压测测试

    1. 背景:互联网发达的今天,大大小小的网站如雨后春笋,不断出现,但是想要做出一个网站很简单,但是想要做好一个网站,非常非常难,首先:网站做好之后的功能怎么样这都是次要的,主要的是你的网站能承受怎么样 ...