javascript使用canvas实现饼状图效果
使用canvas写一个饼状图，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id='canvas' width='800' height='400' style="border: 1px solid red;"></canvas>
<script>
let data = [
{ title: "服饰1", money: 400 },
{ title: "服饰2", money: 300 },
{ title: "服饰3", money: 400 },
{ title: "服饰4", money: 200 },
{ title: "服饰5", money: 500 },
{ title: "服饰6", money: 180 },
{ title: "服饰7", money: 500 }]
/** @type {HTMLCanvasElement} */
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
let r = 100;
let money = function (obj, sum) {
for (let i = 0; i < obj.length; i++) {
sum += data[i].money
}
return sum;
}
let totalmoney = money(data, 0);
let nowsum = 0;
let start = 0;
let end = 0;
let R = 100;
let i=0;
data.forEach(function (item) {
ctx.beginPath()
nowsum += item.money;
end = (nowsum / totalmoney)
ctx.moveTo(150, 150);
ctx.arc(150, 150, R, start*Math.PI*2, end*Math.PI*2)
start = end;
//产生随机颜色
ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
ctx.rect(350,5+(35*i),30,30);
ctx.font="14px 黑体"
ctx.fillText(item.title,400,25+(35*i))
ctx.strokeStyle = "gray"
ctx.fill();
ctx.stroke();
i++;
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
D3.js实现饼状图的方法详解
前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
jQuery.Highcharts.js绘制柱状图饼状图曲线图
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart; $(document).ready(function() { chart = new Highcharts.Chart({ c
-
javascript使用canvas实现饼状图效果
使用canvas写一个饼状图,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
本文实例讲述了jQuery插件FusionCharts实现的2D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FusionCharts2D饼图</title> <script src="js/jquery-1.4.2.min.js"></scr
-
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
本文实例讲述了jQuery插件FusionCharts绘制的3D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>最新版FusionCharts3D饼图</title> <script src="js/jquery-1.4.2.min.js"></s
-
iOS实现带指引线的饼状图效果（不会重叠）
效果图 先上图(做出来的效果就是下图的样子) 1.效果图-w220 图中不论每个扇形多小,都可以从指引线处将指引的数据分割开来,不会重叠. 第一步 需要给图中数据做个模型 @interface DVFoodPieModel : NSObject /** 名称 */ @property (copy, nonatomic) NSString *name; /** 数值 */ @property (assign, nonatomic) CGFloat value; /** 比例 */ @propert
-
JavaScript canvas实现九宫格切图效果
本文实例为大家分享了canvas实现九宫格切图效果的具体代码,供大家参考,具体内容如下 首先页面展示 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
-
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec
-
利用Tkinter和matplotlib两种方式画饼状图的实例
当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图. 首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import Tk, Canvas def DrawPie(): #创建窗口 windows=Tk() #添加标题 windows.title("画饼图") # 设置画布样式 canvas=Canvas(windows,height=500,width=500) # 将画布打包到窗口 canvas.
-
DevExpress设置饼状图的Lable位置实例
本文实例讲述了DevExpress设置饼状图的Lable位置的方法.分享给大家供大家参考.具体实现方法如下: 关键代码如下: 复制代码 代码如下: /// <summary> /// 设置饼状图的Lable位置 /// </summary> /// <param name="series">Series</param> /// <param name="lablePosition">PieSeriesLab
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts实现的2D堆条状图效果.分享给大家供大家参考,具体如下: 1.HighCharts之2D堆条状图源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆条状图</title> <script type="text/javascript" src