JavaScript 绘制饼图的示例_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 绘制饼图的资料请关注真格学网其它相关文章!

您可能感兴趣的文章:extjs图形绘制之饼图实现方法分析JavaScript使用百度ECharts插件绘制饼图操作示例JS+canvas动态绘制饼图的方法示例读取数据库的数据并整合成3D饼图在jsp中显示详解Javascript highcharts 饼图显示数量和百分比实例代码html+js+highcharts绘制圆饼图表的简单实例使用js画图之饼图javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图轻松使用JSP生成饼图

  • 本文相关:
  • js实现很酷的email地址添加功能实例
  • 在html中使用javascript的两种方法
  • 基于javascript实现json数据根据某个字段进行排序
  • javascript模板引擎实现原理实例详解
  • java varargs 可变参数用法详解
  • js提示框替代系统alert,自动关闭alert对话框的实现方法
  • javascript 获取网页标题
  • 微信小程序发送短信验证码完整实例
  • cryptojs中aes实现前后端通用加解密技术
  • javascript事件代理和委托详解
  • javascript+SVG画饼图
  • js怎么制作饼状图?
  • 怎么用js、html、css绘制饼状图求高手解答??急急急
  • 使用Canvas画布结合JavaScript绘制以下图形,写出...
  • 如何用js的jqplot画空心饼图(面包圈)
  • 怎么用javascript做扇形统计图,求源码,万分感谢
  • 怎样用js 画柱状图 饼图 和 曲线图
  • 如何用D3.js绘制饼图
  • javascript如何画图形?
  • 求一个可以显示比例的js饼状图插件,要求使用简单
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptextjs图形绘制之饼图实现方法分析javascript使用百度echarts插件绘制饼图操作示例js+canvas动态绘制饼图的方法示例读取数据库的数据并整合成3d饼图在jsp中显示详解javascript highcharts 饼图显示数量和百分比实例代码html+js+highcharts绘制圆饼图表的简单实例使用js画图之饼图javascript矢量图表库-graphael几行代码实现精美的条形图/饼图/点图/曲线图轻松使用jsp生成饼图js实现很酷的email地址添加功能实例在html中使用javascript的两种方法基于javascript实现json数据根据某个字段进行排序javascript模板引擎实现原理实例详解java varargs 可变参数用法详解js提示框替代系统alert,自动关闭alert对话框的实现方法javascript 获取网页标题微信小程序发送短信验证码完整实例cryptojs中aes实现前后端通用加解密技术javascript事件代理和委托详解js刷新页面方法大全js删除数组里的某个元素方法js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js保留两位小数方法总结js实现带有介绍的select列表菜单实例javascript实现复制与粘贴操作实例js仿黑客帝国字母掉落效果代码分享js实现屏蔽默认快捷键调用自定义事件示例laydate日历控件使用方法详解js中巧用csstext属性批量操作样式bootstrap下拉菜单更改为悬停(hover)触发javascript中的隐式调用javascript trim 去除字符串空格的三种方js实现简单音乐播放器
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved