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. 20155332 如何获取新技能+c语言学习调查

    如何获取新技能+c语言学习调查 你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...

  2. WPF MVVM从入门到精通4：命令和事件

    原文:WPF MVVM从入门到精通4:命令和事件   WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WP ...

  3. MySQL入门篇（七）之Xtrabackup备份与恢复

    一.Xtrabackup介绍 MySQL冷备.mysqldump.MySQL热拷贝都无法实现对数据库进行增量备份.在实际生产环境中增量备份是非常实用的,如果数据大于50G或100G,存储空间足够的情况 ...

  4. datax源代码编译安装

    what is DataX ? DataX是阿里巴巴集团内被广泛使用的离线数据同步工具/平台. 实现包括MySQL,SQL Server,Oracle,PostgreSQL,HDFS,Hive,HBa ...

  5. SpringBoot-08：SpringBoot采用json的方式实现前后台通用的配置文件

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 一.需求: 本篇博客是最近笔者做的一个项目,已经上线但是还在不断开发,有些页面上的配置,测试服务器和正式服务器 ...

  6. Drupal views 中合并显示字段

    如图, 需要显示如下数据表格 表格的第三列是由两个字段组成的.分别是title 标题字段和body 内容字段. 默认情况下,一列只显示一个字段.如何同时显示两个呢? 这个问题难不到强大的views,要 ...

  7. kali安装后相关软件的配置

    更新软件apt-get updateapt-get upgrade安装输入法apt-get install ibus-pinyin apt-get install netspeed安装GNOMEapt ...

  8. 日志采集框架 Flume

    日志采集框架 Flume 1 概述  Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统. Flume可以采集文件,socket数据包等各种形式源数据,又可以将采集到的数据输出到H ...

  9. asp.net core添加全局异常处理及log4net、Nlog应用

    0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.介绍 此篇文章将会介绍项目的全局异常收集以及采用log4net或者NLog记录. 众所周知,一旦自己的项目报错,如果没有进行处 ...

  10. 【MySQL函数】日期篇

    1.date_format()函数 date_format(createtime,'%Y') 年 date_format(createtime,'%Y-%m') 年月 date_format(crea ...