接着上一节说,这次我使用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学习之饼状图的更多相关文章

  1. jqPlot图表插件学习之饼状图和环状图

    一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...

  2. canvas+js画饼状图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  4. canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  5. 【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题

    前言 众所周知,通过数据绘图,我们可以将枯燥的数字转换成容易被人们接受的图表,从而让人留下更加深刻的印象.而大多数编程语言都有自己的绘图工具,matplotlib就是基于Python的绘图工具包,使用 ...

  6. 封装构造函数,用canvas写饼状图和柱状图

    封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...

  7. canvas制作柱形图/折线图/饼状图,Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. ECharts学习(2)--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  9. Java-jfree报表(学习整理)----饼状图、柱状图、折线统计图

    1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...

随机推荐

  1. Mysqldump 参数大全

    参数 参数说明 --all-databases  , -A 导出全部数据库. mysqldump  -uroot -p --all-databases --all-tablespaces  , -Y ...

  2. CentOS 安装 Gitlab

    源地址 https://mirror.tuna.tsinghua.edu.cn/gitlab-ce/ # 清华源 https://mirrors.tuna.tsinghua.edu.cn/help/g ...

  3. 编译openwrt时总是报错“staging_dir/target-aarch64_generic_glibc/stam$/.tools_compile_yynyyyyynyyyyynyynnyyyynyyyyyyyyyyyyyyynyynynnyyynny' failed”

    1. 详细错误如下: tools/Makefile:146: recipe for target '/home/jello/openwrt/staging_dir/target-aarch64_gen ...

  4. String comparison is too slow in R language

    ## String comparison is too slow in R language ## it will take 3 minutes, it is too slow date() strA ...

  5. oracle的loop等循环语句的几个用法小例子

    --loop循环用法 (输出1到10) declare v_num number(2) := 0; begin loop v_num := v_num + 1; exit when v_num > ...

  6. 论文阅读:Videos as Space-Time Region Graphs

    Videos as Space-Time Region Graphs ECCV 2018 Xiaolong Wang 2018-08-03 11:16:01 Paper:arXiv 本文利用视频中时空 ...

  7. Android 使alertDialog.builder不会点击外面和按返回键消失

    这个问题之前一直困扰我,我的需求就是点击对话框外面和按返回键对话框不会消失,按返回键还好解决,拦截下返回键就OK了. 但是点击外面不好解决.之前有人说模态对话框,我看了一会,觉得不是我想要的效果.po ...

  8. Java转义形如nbsp;的HTML编码

    需要引用一个maven <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 --> <d ...

  9. 【Django】【Shell】

    django-admin startproject guest python manage.py startapp sign python manage.py runserver 127.0.0.1: ...

  10. React绑定事件动态化的实现方法

    一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...