帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» canvas数据可视化
canvas数据可视化
浏览:771次
-
评论:0次
-
发布时间:2017-10-30
Html
Css
Js
生成
.input { width:150px; position:absolute; } .input input { display:block; margin-bottom:2px; width:60px; border:none; border:1px solid rgb(22,212,203); } .input input:nth-of-type(1) { background-color:rgba(255,238,0,0.979); } .input input:nth-of-type(2) { background-color:rgb(30,238,11); } .input input:nth-of-type(3) { background-color:rgb(255,102,0); } .input input:nth-of-type(4) { background-color:rgb(236,13,236); } .input input:nth-of-type(5) { background-color:rgb(0,102,255); } .input input:nth-of-type(6) { background-color:rgba(158,154,154,0.993); } .input input:nth-of-type(7) { background-color:rgb(218,70,82); } button { width:62px; background-color:#fff; outline:none; } canvas { display:block; }
//获取页面元素 var cas = document.querySelector("#cas") var ctx = cas.getContext('2d'); // 设置初始化状态 ctx.arc(300, 300, 100, 0, 10) ctx.strokeStyle = 'red' ctx.stroke(); // 注册点击生成事件 $('#btn').click(function() { ctx.clearRect(0, 0, cas.width, cas.height) var arr = [$('#one').val() * 1, $('#two').val() * 1, $('#three').val() * 1, $('#four').val() * 1, $('#five').val() * 1, $('#six').val() * 1]; var color = ['rgba(255, 238, 0, 0.979)', 'rgb(30, 238, 11)', 'rgb(255, 102, 0)', 'rgb(236, 13, 236)', "rgb(0, 102, 255)", "rgba(158, 154, 154, 0.993)", "rgb(218, 70, 82)"]; var sum = 0; for (var i = 0; i < arr.length; i++) { sum += arr[i]; } var arr2 = []; for (var i = 0; i < arr.length; i++) { var data = arr[i] / sum * 360 arr2.push(data) } ctx.font = '20px 楷体' var start = -90; for (var i = 0; i < arr2.length; i++) { if (arr2[i] == 0) { continue; } ctx.beginPath(); ctx.moveTo(300, 300) if (i == 0) { ctx.arc(300, 300, 100, toRad(start), toRad(start + arr2[i])) var str = start; var str2 = start + arr2[i]; start += arr2[i] } else { ctx.arc(300, 300, 100, toRad(start), toRad(start + arr2[i])) var str = start; var str2 = start + arr2[i]; start += arr2[i]; } ctx.fillStyle = color[i] ctx.fill(); ctx.beginPath(); ctx.textAlign = "left"; ctx.textBaseline = "bottom" ctx.fillText(Math.floor(arr[i] / sum * 100) + '%', 550, (i + 1) * 20) ctx.stroke(); console.log((str2 - str) / 2 + str) var x1 = 130 * Math.cos(toRad((str2 - str) / 2 + str)); var y1 = 130 * Math.sin(toRad((str2 - str) / 2 + str)); if (((str2 - str) / 2 + str) <= 0) { x1 = 300 + x1; y1 = 300 + y1; ctx.textAlign = 'left'; ctx.textBaseline = 'bottom' } else if (0 < (str2 - str) / 2 + str && (str2 - str) / 2 + str <= 90) { x1 = 300 + x1; y1 = 300 + y1; ctx.textAlign = 'left'; ctx.textBaseline = 'top' } else if (90 < (str2 - str) / 2 + str && (str2 - str) / 2 + str <= 180) { x1 = 300 + x1; y1 = 300 + y1; ctx.textAlign = 'right'; ctx.textBaseline = 'top' } else if (180 < (str2 - str) / 2 + str && (str2 - str) / 2 + str < 270) { x1 = 300 + x1; y1 = 300 + y1; ctx.textAlign = 'right'; ctx.textBaseline = 'bottom' } ctx.beginPath(); ctx.fillStyle = color[i] ctx.fillText(Math.floor(arr[i] / sum * 100) + '%', x1, y1) ctx.fill(); ctx.beginPath(); ctx.moveTo(300, 300) ctx.lineTo(x1, y1) ctx.strokeStyle = 'rgb(66, 66, 66)' ctx.lineWidth = "1" ctx.stroke(); } }) //角度转弧度 function toRad(a) { return a * Math.PI / 180 }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.2.3
<!doctype html><html><head><meta charset="utf-8"><title>canvas数据可视化-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:canvas数据可视化,输入数据生成饼形图,分析数据比值
可传入数据,生成饼形统计图,实现数据的可视化,更直观的面向数据。
简易进制转换计算器
人性化时间显示
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
771
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值