canvas学习之饼状图
接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js,
引入
import {canvasPoint} from '../../assets/js/canvas';
import {basicInfo,histogramMousemoveEvent} from '../../assets/js/SectorGraph';
使用方法:
function histogramCreate(width,point){
var canvas=document.getElementById('myCanvas');
if(!!width){
if(width > 758)
canvas.width = width;
}else{
var canvasWidth = document.getElementById('histogramPanel');
if(canvasWidth.offsetWidth > 758)
canvas.width = canvasWidth.offsetWidth;0
}
addHistogramMousemove(canvas);
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
//绘制饼状图
basicInfo(ctx,[{num:20,name:"0001",color:"red"},
{num:20,name:"0002",color:"black"},
{num:20,name:"0003",color:"yellow"},
{num:20,name:"0004",color:"gray"},
{num:12,name:"0005",color:"pink"},
{num:42,name:"0006",color:"blue"},
{num:2,name:"0007",color:"green"}
]);
}
SectorGraph.js介绍:
我感觉注释写的很细了,所以具体细节我就不说额,只是把我的思路说一下,用户给到数据后,我会计算每一个数据里面的数量占总数量的百分比,这样就拿到了度数,用户绘制饼状图,然后需要给每一个饼状图添加备注信息,这个我的思路是分左边备注和右边备注,取每个饼的中心点作为开始点,然后把开始点进行排序,用贝塞尔曲线连接每一个开始点和备注点,还有一个问题就是每次用户鼠标进入的时候的效果,我会存储每个饼的位置,当鼠标滑动时时候,我会判断点是否在饼中,并获得在哪一个饼中,然后重绘。
最新文章
- 为什么要用rem
- gcc的-D和-U参数：宏的设置与取消 _CCFLAGS=" -w -enable-threads=posix -DLINUX -D_REENTRANT -DWORKONGN -Dlinux -D_GN_DETAIL_SDR_"
- linux的free命令
- MYSQL BENCHMARK函数的使用
- ubuntu： qemu+gdb 调试linux kernel 学习笔记
- Java中 return 和finally
- Python 基础【第六篇】字典
- 武汉科技大学ACM ：1006: 华科版C语言程序设计教程（第二版）习题7.15
- 《TCP/IP详细说明》读书笔记（17章）－TCP传输控制协定
- 安装GPU版本的tensorflow填过的那些坑！---CUDA说再见！
- ChromeExtension那些事儿
- p标签内容实现第二行缩进两个字体间距
- ROIAlign, ROIPooling及ROIWarp对比
- rman 脚本大全
- mybatis核心文件详解
- Vue笔记：使用 axios 发送请求
- vue子组件的自定义事件
- UVALive 6913 I Want That Cake 博弈dp
- flash 拾遗
- 第十一次PSP