第167天：canvas绘制柱状图
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绘制柱状图的更多相关文章
- 【带着canvas去流浪】（1）绘制柱状图
目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...
- 带着canvas去流浪系列之一：绘制柱状图
[摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
随机推荐
- 用sudo 运行命令的时候，环境变量用的是super用户的环境变量
比如今天在~/.bashrc设置了JAVA_HOME, 而sudo运行命令的时候却显示没有设置可用的JAVA_HOME
- 百度地图Map属性和方法
map的L属性:TANGRAM__1 map的F属性:[object Object] map的xa属性:[object HTMLDivElement] map的width属性:1340 map的hei ...
- 记一次SpringBoot使用WebUploader的坑
问题: B/S通常都会涉及到文件的上传,普通文件上传使用文件框,后台接收文件即可 我遇到的问题是要开发一个大文件上传的功能,那就肯定要支持文件的分片 分析: 1.参考网上的资料后,通常的多文件和大文件 ...
- RHCSA-EXAM 模拟题目
参考答案:http://www.cnblogs.com/venicid/category/1088924.html 请首先按找以下要求配置考试系统: * Hostname: server0.examp ...
- 1. oracle12C的安装
官方安装文档:https://docs.oracle.com/database/121/LTDQI/toc.htm#BHCCADGD 1.软件准备 oracle12c.zip 安装包 VMware 虚 ...
- poj 2079(旋转卡壳求解凸包内最大三角形面积)
Triangle Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 9060 Accepted: 2698 Descript ...
- MSP430的CAN通信发送
1. 电路图如下,RE是接收使能,DE是发送使能,看图的话,这个CAN只支持半双工 2. 使用MSP430F149,以下代码只有发送,其实用的是串口 #include <msp430x14x.h ...
- [Cocos2d-html5]关于压缩
使用的是2.2版本,压缩时要注意文件顺序,main.js文件最好排在最后一个,避免错误.
- 二、Django用户认证之cookie和session
1.cookie原理 Cookie意为“甜饼”,是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.O ...
- exe4j 使用记录（二）：jar打包exe
一.环境 exe4j: 6.0.2 jre(32位): 1.8 二.打包过程 1.新建一个文件夹testExe(我的目录位置:D:\testExe)用来存放所需要打成exe的jar包.jdk或者jre ...