第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"> & ...
随机推荐
- 20155226 2016-2017-2 《Java程序设计》第一周学习总结
20155226 2006-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 第一周主要学习了一二章的内容,也浏览了剩余章节,以下是本周主要学习内容总结 1.首先了解了[ ...
- 20155315实验四 Android程序设计
实验内容 安装 Android Stuidio 学习Android Stuidio调试应用程序 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...
- MySql访客连接设置
步骤: 1 . 打开命令窗口,切换到mysql安装目录 可以在控制台目录切换,也可以打开所在安装目录后再打开控制台 2 . 执行命令:mysql -u root -p 3 . 无法访问的话,查看防火墙 ...
- 覆盖Django mysql model中save方法时碰到的一个数据库更新延迟问题
最近有一个需求,通过django的admin后台,可以人工配置5张表的数据,这些数据进行一些业务规则处理后会统一成一份数据缓存在一个cache之中供服务端业务访问,因而任何一张表的数据更新(增.删.改 ...
- 【LG3321】[SDOI2015]序列统计
[LG3321][SDOI2015]序列统计 题面 洛谷 题解 前置芝士:原根 我们先看一下对于一个数\(p\),它的原根\(g\)有什么性质(好像就是定义): \(g^0\%p,g^1\%p,g^2 ...
- 4540: [Hnoi2016]序列
4540: [Hnoi2016]序列 https://www.lydsy.com/JudgeOnline/problem.php?id=4540 分析: 莫队+RMQ+单调栈. 考虑加入一个点后,区间 ...
- LVS入门篇（五）之LVS+Keepalived实战
一.实验架构和环境说明 (1)本次基于VMware Workstation搭建一个四台Linux(CentOS 7.4)系统所构成的一个服务器集群,其中两台负载均衡服务器(一台为主机,另一台为备机), ...
- OpenStack入门篇（五）之KVM性能优化及IO缓存介绍
1.KVM的性能优化,介绍CPU,内存,IO性能优化 KVM CPU-->qemu进行模拟ring 3-->用户应用 (用户态,用户空间)ring 0-->操作系统 (内核态,内核空 ...
- GBDT为什么不能并行，XGBoost却可以
传统的GBDT是以CART作为基分类器,xgboost还支持线性分类器,这个时候XGBOOST相当于带L1和L2正则化的逻辑斯蒂回归(分类问题)或者线性回归(回归问题).传统的GBDT在优化的hih只 ...
- xgboost算法教程(两种使用方法)
标签: xgboost 作者:炼己者 ------ 欢迎大家访问我的简书以及我的博客 本博客所有内容以学习.研究和分享为主,如需转载,请联系本人,标明作者和出处,并且是非商业用途,谢谢! ------ ...