饼状图

最新推荐文章于 2024-06-19 16:30:03 发布
最新推荐文章于 2024-06-19 16:30:03 发布
阅读量137 收藏
点赞数
分类专栏： 日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38766543/article/details/82594928
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas width="800" height="600" style="border: 1px solid gray;margin: 20px auto;display: block;"></canvas>
</body>
</html>
<script>
//    var can=document.querySelector("canvas");
//    var con=can.getContext("2d");
//    var w=con.canvas.width;
//    var h=con.canvas.height;

//1.画饼状图
//2.绘制饼状图的标题
//3.绘制饼状图的说明



//创建构造函数
    var PieChart= function () {
        this.ctx=document.querySelector("canvas").getContext("2d");
        this.w=this.ctx.canvas.width;
        this.h=this.ctx.canvas.height;
        this.x0=this.w/2+60;//往右边挪一点
        this.y0=this.h/2;
        this.r=150;
        this.outXian=20;
        //设置示例矩形的宽高 和 到画布的间距
        this.rectW=15;
        this.rectY=10;
        this.space = 20;
    }
//初始化
    PieChart.prototype.init= function () {

        this.bingTu(data);
//        this.title();
//        this.shuoMing();
    }
//    绘制饼图
    PieChart.prototype.bingTu=function(data){
    //准备数据
//   将数据转化为弧度
     var angleList = this.angle(data);
        var that=this;
        var start=0;
        angleList.forEach(function (item, i) {
            var end=item.angle+start;
            that.ctx.beginPath();
            that.ctx.moveTo(that.x0,that.y0);
            that.ctx.arc(that.x0,that.y0,that.r,start,end);
            var color = that.ctx.fillStyle=that.random();
            that.ctx.fill();

            //调用tltle
           that.title(start,item.angle,color,item.title);

            //调用说明
            that.shuoMing(i,item.title,color);
            start=end;
        })
    };
//    绘制标题
PieChart.prototype.title=function(start,angle,color,title){
    //1.从圆心到圆外的长度 就是半径加20
    //2.出去的坐标 对边 半径加20乘sin（Y）  旁边 cos（X）
    //弧度 扇形的起始弧度加对应弧度的一半

    //斜边
    var xie = this.r+this.outXian;
    //X轴方向的
    var Xbian=xie*Math.cos(start+angle/2);
    //Y轴方向的
    var Ybian=xie*Math.sin(start+angle/2);

    var outX=this.x0+Xbian;
    var outY=this.y0+Ybian;
    this.ctx.beginPath();
    this.ctx.moveTo(this.x0,this.y0);
    this.ctx.lineTo(outX,outY);
    this.ctx.strokeStyle=color;
    this.ctx.stroke();



    this.ctx.font="14px 宋体";
    var txtWidth=this.ctx.measureText(title).width;
    if(outX>this.x0){
        this.ctx.lineTo(outX+txtWidth,outY);
        this.ctx.textAlign="left";
        this.ctx.textBaseline="bottom";
        this.ctx.fillText(title,outX,outY);

    }else{
        this.ctx.lineTo(outX-txtWidth,outY);
        this.ctx.textAlign="right";
        this.ctx.textBaseline="bottom";
        this.ctx.fillText(title,outX,outY);

    }

    this.ctx.stroke();




};
//    绘制说明
PieChart.prototype.shuoMing=function(index,title,color){
    this.ctx.fillStyle=color;
    this.ctx.fillRect(this.space,this.space+index*(this.rectY+10),this.rectW,this.rectY);

    this.ctx.textBaseline="top";
    this.ctx.font="12px 黑体";
    this.ctx.textAlign="left";
    this.ctx.fillText(title,this.space+this.rectW+10,this.space+index*(this.rectY+10));

};
//转化为弧度
PieChart.prototype.angle=function(data){
    var total=0;
    data.forEach(function (item, i) {
        total+=item.num;
    });
    data.forEach(function(item,i){
        var angle=item.num/total*2*Math.PI;
        item.angle=angle;
    })
    return data;
};
PieChart.prototype.random=function(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return 'rgb('+r+','+g+','+b+')';
}


    var data=[{title:"20以下",num:6},{title:"20-25",num:26},{title:"25-30",num:20},{title:"30-35",num:8}];
    var pc=new PieChart();
    pc.init();
</script>
baidu_38766543
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最全Python绘制饼形图（饼状图）
阿黎逸阳的博客
02-04 8万+
让你彻底学会用Python绘制饼状图。
数据可视化--饼状图
qq_42309685的博客
08-26 3836
数据可视化–饼状图 功能：模拟从后台获取数据，将数据绘制成饼状图，效果如下： <canvas height="500px" width="800px"></canvas> <script> //模拟从后台获取数据 var data = [ {title:'15-20岁',num:6}, {title:'20-25岁',num:3...
1.Echarts饼状图详解及示例
笨小孩
12-19 6万+
1、基本饼状图示例 2、内嵌图示例及绑定点击事件 3、未能实现的饼状图形
我用Python的Matplotlib库绘制25个超好看图表
最新发布
2301_78095812的博客
06-19 816
在读技术博客的过程中，我们会发现那些能够把知识、成果讲透的博主很多都会做动态图表。他们的图是怎么做的？难度大吗？这篇文章就介绍了 Python 中一种简单的动态图表制作方法。数据暴增的年代，数据科学家、分析师在被要求对数据有更深的理解与分析的同时，还需要将结果有效地传递给他人。如何让目标听众更直观地理解？当然是将数据可视化啊，而且最好是动态可视化。。接触过数据可视化的同学应该对 Python 里的 Matplotlib 库并不陌生。
使用H5的canvas绘制饼状图
weixin_44823731的博客
05-12 877
前言：在我们写网站，我们往往都想要向用户展示一些数据，比如访问数，文章的点击数等等。如果我们只是用数字来向用户展示的，用户很可能会感觉到枯燥，因为数据的显示实在使太单一的。所以今天我来教大家来用H5的画布api来绘制饼状图，让你的网站更加高大上。 直接进入正题，先展示成果和源码。 最终结果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
立体饼状图资源源码.rar
02-14
立体饼状图是一种数据可视化工具，它以三维立体的形式展示数据的比例关系，使得数据更加直观易懂。在IT行业中，特别是在数据分析、报表制作以及UI设计等领域，立体饼状图经常被用于表现各部分占整体的比例，同时其...
分段饼状图
07-21
分段饼状图是一种数据可视化工具，常用于展示各部分占整体的比例关系。在数据分析和信息展示中，它能够直观地表现出每个类别在整体中的权重，尤其适合对比多个部分之间的相对大小。饼状图通常由一个圆形划分成若干个...
HTML中的3D饼状图
06-20
4. **数据绑定**：将数据与饼状图的各个部分关联起来，通过改变数据，饼状图的形状和大小也会相应变化，这有助于用户理解数据的分布。 5. **交互性**：3D饼状图通常会添加鼠标悬停、点击等交互效果，例如显示详细的...
Android自定义控件实现饼状图
08-26
Android 自定义控件实现饼状图 Android 自定义控件实现饼状图主要是通过自定义控件来实现饼状图的绘制，核心代码在 onDraw 函数中，对静态控件进行绘制。以下是相关知识点的总结： 1. Android 自定义控件：自定义...
简单的饼状图
07-18
饼状图是一种常用的数据可视化工具，它以圆形的面积来表示数据的比例关系，常用于展示一个整体被几个部分划分的情况。在数据科学、统计学以及各类数据分析报告中，饼状图能够直观地揭示各部分占总体的比例，帮助读者...
HTML5 Canvas饼状图表
08-19
HTML5 Canvas饼状图表,HTML5&jQuery图表应用
HTML5绘制饼图实例（二）
03-26
NULL 博文链接：https://sarin.iteye.com/blog/1149851
h5 canvas手工写一个初级的饼状图,只为研究原理,自娱自乐
u013067420的博客
09-15 1259
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="pie" width="800px" height="600px" style="border: 1px solid #999999;margin: 0px;pad
echarts饼状图
BloodyMandoo的博客
05-18 8万+
一、echarts 饼状图 引用文件 echart 初始化 var myChart = echarts.init(document.getElementById("main")); myChart.setOption(option); 配置 option option = { title : { text: '南丁格尔
echarts_饼状图.html
weixin_42193179的博客
03-22 1633
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>饼状图</title> <script src="echarts.js"></script> </head> <body>...
H5使用canvas绘制饼状图
weixin_42560017的博客
07-16 563
1.在HTML中引入Canvas标签 <canvas class="pie-chart" width="850" height="500" ></canvas> 2.引入单独的js文件 let PieChart = function(selector, options){ let canvas = "string" === typeof selector ? do...
echarts3实现柱状图和饼图详解
xiaoxiaoluckylucky的博客
02-26 4701
版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/xiaoxiaoluckylucky/article/details/79374055本篇文章实现的是以下两种需求：1，使用Echarts3实现柱状图；2，使用Echarts3实现饼图；包含Echarts使用过程中遇到的部分坑的解决办法。先上效果图：（PS：饼图实际上是圆的，以上图片是被压缩了）进入正题...
纯css3实现饼状图-------Day21
麦田里
05-30 1万+
现代网站在商务应用中比较广泛
Excel饼状图制作技巧
饼状图可以分为不同类型，包括标准饼状图、三维饼状图、复合饼状图、分离型饼状图、分离型三维饼状图和复合条饼状图。标准饼状图是最基本的形式，用于展示各个数据在总数值中的比例。三维饼状图则具有立体效果，增加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值