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 相关文章推荐
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
js实现索引图片切换效果
Nov 21 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
node+express制作爬虫教程
Nov 11 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
15分钟上手vue3.0(小结)
May 20 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防盗链的常用方法小结
2010/07/02 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
浅谈python import引入不同路径下的模块
2017/07/11 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python Grid使用和布局详解
2018/06/30 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
使用Python实现画一个中国地图
2019/11/23 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python 爬虫的原理
2020/07/30 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
档案保密承诺书
2014/06/03 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js