第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"> & ...
随机推荐
- javaWeb项目-文件下载的消息头和编码问题
一.问题: 做web项目经常提到的一个需求就是页面的文件下载,那么下载的时候在后台为什么要设置响应消息头?为什么这样设置? 二.解决: 1.例子 //设置响应的消息头response.setConte ...
- (ex)Lucas总结
(ex)Lucas总结 普通Lucas 求 \[ C_n^m\;mod\;p \] 其中\(n,m,p\leq 10^5\)其中\(p\)为质数 公式不难背,那就直接背吧... \[ C_n^m\;m ...
- 【mysql经典题目】科目成绩都大于80分\每个科目的第一名\总成绩排名
参考:http://blog.csdn.net/lifushan123/article/details/44948135 1.查询出科目成绩都大于80分的学生的名字? drop table if EX ...
- 将 Python3 文件打包成 exe 文件
我们用 Python 写好的代码,如何给别人在没有配置 Python 环境的情况下直接使用呢?尤其是面向 windows 众. 因为 Python 是一门解释性的语言,离开了 Python 解释器,P ...
- java阻塞队列之LinkedBlockingQueue
LinkedBlockingQueue是BlockingQueue中的其中一个,其实现方式为单向链表,下面看其具体实现.(均为JDK8) 一.构造函数 在LinkedBlockingQueue中有三个 ...
- Appium 运行脚本报错InvalidSelectorException: Message: Locator Strategy 'css selector' is not supported for （转）
现象:Appium运行脚本报错InvalidSelectorException: Message: Locator Strategy 'css selector' is not supported f ...
- winform圆角窗体实现
winform圆角窗体实现 1.窗体的FormBorderStyle设置成None,不要控制边框 2.TransparencyKey和BackColor颜色设置成相同的,这样,窗体就透明了 3.以此为 ...
- java使用jacob将office文档转换为PDF格式
jacob 包下载地址: http://sourceforge.net/projects/jacob-project/ 下载后,将jacob 与 jacob-1.19-x64.dll放到安装jdk目录 ...
- 亚马逊6月18日发布惊世之作 或为3D智能手机
亚马逊将在 6 月 18 日举行一个产品发布会. 其内容可能是关于传闻已久的亚马逊智能手机.该公司在 YouTube 上公布了一段炫耀这款设备的视频.这段视频展示了很多人在这款产品前摇头晃脑,并且表现 ...
- New York Comic Con 2013 - 2013年纽约动漫展
New York Comic Con - 2013年纽约动漫展 New York Comic Con is the largest pop culture event on the East Coas ...