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介绍:
我感觉注释写的很细了,所以具体细节我就不说额,只是把我的思路说一下,用户给到数据后,我会计算每一个数据里面的数量占总数量的百分比,这样就拿到了度数,用户绘制饼状图,然后需要给每一个饼状图添加备注信息,这个我的思路是分左边备注和右边备注,取每个饼的中心点作为开始点,然后把开始点进行排序,用贝塞尔曲线连接每一个开始点和备注点,还有一个问题就是每次用户鼠标进入的时候的效果,我会存储每个饼的位置,当鼠标滑动时时候,我会判断点是否在饼中,并获得在哪一个饼中,然后重绘。
canvas学习之饼状图的更多相关文章
- jqPlot图表插件学习之饼状图和环状图
一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...
- canvas+js画饼状图
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- HTML5之Canvas绘图实例——饼状图
实现饼状分布画图(如下):调试环境:Firefox
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- 【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题
前言 众所周知,通过数据绘图,我们可以将枯燥的数字转换成容易被人们接受的图表,从而让人留下更加深刻的印象.而大多数编程语言都有自己的绘图工具,matplotlib就是基于Python的绘图工具包,使用 ...
- 封装构造函数,用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...
- canvas制作柱形图/折线图/饼状图,Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- ECharts学习(2)--饼状图之南丁格尔图
1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
- Java-jfree报表(学习整理)----饼状图、柱状图、折线统计图
1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...
随机推荐
- topcoder srm 325 div1
problem1 link $g[i]$表示解决前$i$个的代价,那么$g[i]$是所有$g[j]+cost(j+1,i)$的最小值. import java.util.*; import java. ...
- Django组件(五) Django之ContentType组件
基础使用 -contenttype组件 -django提供的一个快速连表操作的组件,可以追踪项目中所有的APP和model的对应关系,并记录在ContentType表中. 当我们的项目做数据迁移后,会 ...
- php知识点-1
global 是在函数内部 声明一个 函数外部的变量(即所谓的全局变量, 而所谓的超全局变量是指 像 $_POST, $GLOBALS等之类的自动系统变量) 的一个别名. 在函数内部使用 unset( ...
- Mysql的唯一性索引unique
目录 唯一性索引unique影响: unique与primary key的区别: 存在唯一键冲突时,避免策略: insert ignore: replace into: insert on dupli ...
- CodeChef - ELHIDARR Find an element in hidden array(互动题)题解
题意:有一串不递减的串,串中的任意元素都有k个,除了一个元素,他只有1 <= n < k-1个,你现在能向oj做出以下操作: 输出:1 pos,oj会返回pos位置的元素值 输出:2 va ...
- 浅谈FFT、NTT和MTT
前言 \(\text{FFT}\)(快速傅里叶变换)是 \(O(n\log n)\) 解决多项式乘法的一个算法,\(\text{NTT}\)(快速数论变换)则是在模域下的,而 \(\text{MTT} ...
- 分布式爬虫scrapy-redis中settings.py中的配置信息
SCHEDULER = "scrapy_redis.scheduler.Scheduler" # 使用scrapy-redis的调度器 ITEM_PIPELINES = { 'sc ...
- 基于OpenNetVM配置环境的发包实践
参考: openNetVM 基于OpenNetVM配置环境的发包实践 注意:本文并未对OpenNetVM的服务链进行测试,而是在借助OpenNetVM脚本环境的情况下,分别对Pktgen和MoonGe ...
- openlayers空间点查询之GetFeatureInfo
在map对象上注册点击方法监听, 这里我用的是wms,当然你也可以查询wfs map.events.register('click', map, function (e) { ...
- _event
EventId 事件ID 请使用大于100的ID EventName 事件的名称,用于游戏中各种提示 NoticeText 事件开始时的弹窗内容 GossipText 功能宝石等菜单内容 Z ...