JavaScript 绘制饼图的示例


Posted in Javascript onFebruary 19, 2021

绘制效果

JavaScript 绘制饼图的示例

实现代码

JavaScript

var canvas = document.getElementById("mycanvas");
var w = window.innerWidth;
var h = window.innerHeight;
canvas.height = 1000;
canvas.width = 1400;
var ctx = canvas.getContext('2d');

var poppable = true;

var slices = [];

function shadeColor(color, percent) {
 var f = parseInt(color.slice(1), 16),
  t = percent < 0 ? 0 : 255,
  p = percent < 0 ? percent * -1 : percent,
  R = f >> 16,
  G = f >> 8 & 0x00FF,
  B = f & 0x0000FF;
 return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
}

function pieSlice(oX, oY, r, pos, len, col,data) {
 this.data = data
 this.originX = oX;
 this.originY = oY;
 this.radius = r;
 this.startingRadian = pos;
 this.length = len;
 this.color = col;
 this.highlightedColor = shadeColor(this.color, .6);
 this.highlighted = false;
 this.popped = false;
 this.animationFrame = 0;

 function setColor(c) {
  this.color = c;
 }
}

pieSlice.prototype.displayData = function(){
 ctx.fillStyle= this.color;
 ctx.fillRect(this.originX - this.radius - 40, this.originY-this.radius-35, 25,25);
 ctx.fillStyle= "white";
 ctx.font = "15px Arial";
 ctx.fillText(this.data, this.originX - this.radius - 10, this.originY - this.radius - 18);
}

pieSlice.prototype.render = function() {
 if (!this.highlighted) {
  ctx.fillStyle = this.color;
  ctx.strokeStyle = this.color;
 } else {
  if(!this.popped && poppable){
   this.displayData();
  }
  // ctx.fillStyle = this.color;
  ctx.fillStyle = this.highlightedColor;
  ctx.strokeStyle = this.color;
 }
 ctx.beginPath();
 var xOffset = Math.cos(this.length / 2 + this.startingRadian) * this.animationFrame;
 var yOffset = Math.sin(this.length / 2 + this.startingRadian) * this.animationFrame;
 ctx.moveTo(this.originX + xOffset, this.originY + yOffset);
 var x = this.originX + xOffset + this.radius * Math.cos(this.startingRadian);
 var y = this.originY + yOffset + this.radius * Math.sin(this.startingRadian);
 ctx.lineTo(x, y);
 ctx.arc(this.originX + xOffset, this.originY + yOffset, this.radius, this.startingRadian, this.startingRadian + this.length);
 if (this.popped) {
  var fill = ctx.fillStyle;
  this.displayData();
  ctx.fillStyle = fill;
  if (this.animationFrame < 30) {
   this.animationFrame += 2;
  }
 } else {
  if (this.animationFrame > 0) {
   this.animationFrame -= 2;
  }
 }
 ctx.closePath();
 //ctx.stroke();
 //if (this.highlighted) {
 ctx.fill();
 // }
}

pieSlice.prototype.update = function() {

}

function pieChart(s) {
 this.slices = s;
}
pieChart.prototype.render = function() {
 this.slices.forEach(function(p) {
  p.render();
 });
};

pieChart.prototype.update = function() {
  this.slices.forEach(function(p) {
   p.update();
  });

 }
 //PIE ONE
var pie = new pieSlice(700, 170, 125, 0, Math.PI / 4, "#FFD1DC", 12);
var slice2 = new pieSlice(700, 170, 125, Math.PI / 4, Math.PI / 4, "#08E8DE");
var slice3 = new pieSlice(700, 170, 125, Math.PI / 2, Math.PI / 4, "#6699CC");
var slice4 = new pieSlice(700, 170, 125, 3 * Math.PI / 4, Math.PI, "#ADD8E6");
var slice5 = new pieSlice(700, 170, 125, 7 * Math.PI / 4, Math.PI / 4, "#B19CD9");
var slices1 = [pie, slice2, slice3, slice4, slice5];

var pink = new pieSlice(220, 170, 125, 0, Math.PI / 3, "#FF4B4B");
var orange = new pieSlice(220, 170, 125, Math.PI / 3, Math.PI / 3, "#FF931B");
var yellow = new pieSlice(220, 170, 125, 2 * Math.PI / 3, Math.PI / 3, "#FFE21B");
var green = new pieSlice(220, 170, 125, 3 * Math.PI / 3, Math.PI / 3, "#90E64E");
var blue = new pieSlice(220, 170, 125, 4 * Math.PI / 3, Math.PI / 3, "#6097D9");
var purple = new pieSlice(220, 170, 125, 5 * Math.PI / 3, Math.PI / 3, "#8365DD");

var redd = new pieSlice(1180, 170, 125, 0, 2 * Math.PI / 3, "#B3989B");
var orangee = new pieSlice(1180, 170, 125, 2 * Math.PI / 3, 1 * Math.PI / 8, "#C1AEE0");
var bluee = new pieSlice(1180, 170, 125, 19 * Math.PI / 24, 4 * Math.PI / 24, "#928CE9");
var greenn = new pieSlice(1180, 170, 125, 23 * Math.PI/24, 3* Math.PI/8, "#676675");
var purplee = new pieSlice(1180, 170, 125, 4 * Math.PI/3, 3* Math.PI/8, "#947D59");
var ceci = new pieSlice(1180, 170, 125, 41 * Math.PI/24, 7*Math.PI/24, "#D994E0");

var slices3 = [redd, orangee, bluee, greenn, purplee, ceci];

var slices2 = [pink, orange, yellow, green, blue, purple];
var pie1 = new pieChart(slices1);
var pie2 = new pieChart(slices2);
var pie3 = new pieChart(slices3);
var update = function() {
 pie1.update();
}
var render = function() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 pie1.render();
 pie2.render();
 pie3.render();
}

var step = function() {
 update();
 render();
 animate(step);
}

var animate = window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 function(callback) {
  window.setTimeout(callback, 1000 / 60);
 };

slices.push.apply(slices, slices1);
slices.push.apply(slices, slices2);
slices.push.apply(slices, slices3);

canvas.addEventListener("mousemove", function(e) {
 var x = e.clientX;
 var y = e.clientY;
 slices.forEach(function(slice) {
  ctx.beginPath();
  var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset);
  var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian);
  var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian);
  ctx.lineTo(xx, yy);
  ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length);
  if (ctx.isPointInPath(x, y)) {
   slice.highlighted = true;
   slice.displayData();
  } else {
   slice.highlighted = false;
  }
  ctx.closePath();

 });
});

canvas.addEventListener("click", function(e) {
 var x = e.clientX;
 var y = e.clientY;
 slices.forEach(function(slice) {
  ctx.beginPath();
  var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset);
  var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian);
  var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian);
  ctx.lineTo(xx, yy);
  ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length);
  if (ctx.isPointInPath(x, y)) {
   if (slice.popped) {
    slice.popped = false;
    poppable = true;
   } else {
    if(poppable){
      slice.popped = true;
     poppable = false;
    }
   }
   slice.highlighted = false;
  }
  ctx.closePath();

 });
});

//start the loop
animate(step);

html

<canvas id="mycanvas"></canvas>

以上就是JavaScript 绘制饼图的示例的详细内容,更多关于JavaScript 绘制饼图的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
layui使用label标签的方法
Sep 14 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 #Javascript
原生JavaScript实现进度条
Feb 19 #Javascript
原生JavaScript实现换肤
Feb 19 #Javascript
基于vue的video播放器的实现示例
Feb 19 #Vue.js
JavaScript Dom实现轮播图原理和实例
Feb 19 #Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 #Javascript
react项目从新建到部署的实现示例
Feb 19 #Javascript
You might like
PHP中HTML标签过滤技巧
2014/01/07 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python控制台显示时钟的示例
2014/02/24 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
介绍一下write命令
2012/09/24 面试题
文明演讲稿范文
2014/05/12 职场文书
代理人委托书
2014/09/16 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
董事长岗位职责
2015/02/13 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
会计专业自荐信范文
2019/05/22 职场文书