文档章节

Canvas-04-柱状图

wei0925
 wei0925
发布于 2017/07/04 22:31
字数 172
阅读 4
收藏 0

#Canvas-04-柱状图 输入图片说明 ##代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>36柱状图案例</title> <style> body { padding: 0; margin: 0; background-color: #f0f0f0; overflow: hidden; } </style> <script src="./konva.js"></script> <script src="js/KonvaExtend.js" charset="utf-8"></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: .2, color: 'blue' },
				{ name: '阿里', value: .4, color: 'red' },
				{ name: '新浪', value: .1, color: 'purple' },
				{ name: '搜狐', value: .1, color: 'navy' },
				{ name: '360', value: .2, color: 'orange'  }
			];

			var his = new Histogram({
				data: data,
				x: 1/8 * stage.width(),
				y: 3/4 * stage.height(),
				blWidth: 2,
				blColor: 'lightblue',
				width: 3/4 * stage.width(),
				height: 1/3 * stage.height(),
				fontSize: 14
			});
			his.addToGroupOrLayer(layer);
			layer.draw();
			his.playAnimate();

			layer.on('click',function(){
				his.playAnimate();
			});
		</script>
	</body>
	</html>

© 著作权归作者所有

wei0925
粉丝 2
博文 15
码字总数 17278
作品 0
温州
程序员
私信 提问
微信小程序图表插件(wx-charts)

微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。 wx-charts基...

飞翔的熊blabla
2018/11/06
0
0
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例

AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形...

sunhuaqiang1
2017/08/29
0
0
canvas图表(2) - 折线图

原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那我的webGL技术就...

Jeff.Zhong
2017/11/21
0
0
wx-charts 微信小程序图表插件

微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个 支持图标类型...

飞翔的熊blabla
2018/10/06
0
0
基于 canvas 的小型图表库--sChart.js

sChart.js:使用canvas实现的一个小型简单的图表库,经过服务器gzip压缩只有2kb,包含柱状图、折线图、饼状图和环形图。 演示地址:demo 不依赖任何js库,使用方便,只需引入sChart.js, ne...

lin_shuai
2017/06/12
515
1

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部