HTML5绘制饼图实例

最新推荐文章于 2023-11-14 11:14:37 发布
最新推荐文章于 2023-11-14 11:14:37 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： HTML5 文章标签： html5 HTML5 Html5

   HTML5引入Canvas元素，用于图形的绘制，我们可以仅仅基于HTML和JavaScript就能绘制出原本可能需要第三方组件的图形。因为做数据统计比较多，那么就用画饼图做为示例来说明。之前绘制饼图可以使用JfreeChart组件，或者Flash组件FusionCharts Free和Open Flash Chart，这些组件的使用之前也介绍过，可以参阅以前的文章。本部分仅来介绍HTML5的Canvas绘制饼图。
    饼图的基础是原型，那么我们先来看看如何使用Canvas绘制原型。当然这很简单了，首先编写HTML代码，如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>HTML5 Demo</title>
  6. </head>
  7. <body>
  8.         <canvas id="circle" width="400" height="300">您的浏览器暂不支持Canvas</canvas>
  9. </body>
  10. </html>
复制代码

    HTML仅仅定义显示的内容，如何画图还要借助JavaScript了，这也很简单，我们来看一下：
  1. <script type="text/javascript">
  2. function drawCircle(){
  3.         var canvas = document.getElementById("circle");
  4.         var ctx = canvas.getContext("2d");
  5.         ctx.fillStyle = '#77D1F6';
  6.         ctx.beginPath();
  7.         ctx.moveTo(200,150);
  8.         ctx.arc(200,150,150,0,Math.PI*2,false);
  9.         ctx.fill();
  10. }
  11. drawCircle();
  12. </script>
复制代码

    我们就在html文件中使用<script>标签来写即可，下面来解释这段代码。首先通过getElementById()方法获取到我们的canvas元素，然后从canvas中获取上下文环境，我们绘制的是2d图形，紧接着是填充的效果，我们定义一种颜色来填充。可能这里有人想到了strokeStyle，这个是绘制路径的颜色，而不是填充的颜色了。然后调用beginPath()开始绘制，首先将画笔移动到圆心处，就是从圆心开始绘制路径，当然这句可以不加，画圆的话不需要每次都回圆心，但是画饼图就需要了了，所以为以后考虑，加上也没事。这里的圆心坐标是（200，150），就是距离左上角向右200个像素，向下150个像素的位置。
    之后的arc方法就是画圆的了。参数的含义为：前两个是圆心坐标，上面解释过了。第三个参数是半径大小，我们定义canvas的宽度为300像素，这里用半径就是300的一半，第四个参数是圆周起始位置，这就很有说头了，也涉及到一些几何知识，我们来看一张图：
e0264b12-6a58-37e2-b94b-91d267cb36c2.jpg 
    0 PI就是起始位置了，沿顺时针路线，分别是0.5 PI（正下方），1 PI和1.5 PI（正上方），这个为我们以后画饼图提供了扇形范围的依据。
    第五个参数是弧长，就是我们圆弧的范围，Math.PI*2就是整个圆了，Math.PI是半圆，这没什么好说的，完全的数学知识。第六个参数是个布尔值，就是确定是顺时针还是逆时针，这里false是顺时针。基础的内容就说完了，我们来看一下效果：
 
    我们可以使用FireFox，Chrome，Safari或Opera来查看效果，IE只会出一行字。画圆很简单，那么扇形就是要计算弧长的图形，扇形组合成一个整圆，就是我们要的饼图了。我们一步一步来，开始画扇形。做数据统计时，我们喜欢用百分比，那么将整个圆周视为100份，我们计算百分数。将JavaScript代码调整如下：
  1. <script type="text/javascript">
  2. var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];
  3. var data = [5,30,15,30,20];

  5. function drawCircle(){
  6.         var canvas = document.getElementById("circle");
  7.         var ctx = canvas.getContext("2d");
  8.         var startPoint=0;
  9.         for(var i=0;i<data.length;i++){
  10.                 ctx.fillStyle = color[i];
  11.                 ctx.beginPath();
  12.                 ctx.moveTo(200,150);
  13.                 ctx.arc(200,150,150,startPoint,startPoint+Math.PI*2*(data[i]/100),false);
  14.                 ctx.fill();
  15.                 startPoint+=Math.PI*2*(data[i]/100);
  16.         }
  17. }
  18. drawCircle();
  19. </script>
复制代码

    解释一下：定义了两个全局变量，color和data用于放置数据和对应的扇形区域的颜色。drawCircle()方法中加入循环，就是根据数据和颜色来进行自动填充，此时就必须使用moveTo()方法来每次回到圆心了，否则就不是扇形了，可以自行去测试。然后对arc方法进行调整，可以发现，第四，第五参数调整，就是扇形其实位置和结束位置了，这里我们定义的startPoint是0，就是从左水平点开始画图，为顺时针方向。画图的弧长是按百分数计算，也就是data数组中的每一项除以100得出的结果，当然data数组本身的和也是100。
    之后进行扇形区域的填充，使用fill()方法即可，我们看到如下结果：

e0264b12-6a58-37e2-b94b-91d267cb36c2.jpg


    到此为止，我们就画好扇形了，细心的人会发现，我们每个扇形连接处都有一道白线，产生的这个问题我们之前说过，就是strokeStyle和stroke方法这里没有用，那么没有对画线的路径进行填充，而画扇形必须要回圆心，那么就需要对画线的路径进行相应填充，在相应位置加上这两个方法，白线就没有了。
    最后，我们要求，从正上方逆时针开始绘图，该如何做？将起始位置定义为1.5PI，arc方法最后一个参数为true，每次的增量不能加，要减，就可以了，代码修改为：
  1. <script type="text/javascript">
  2. var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];
  3. var data = [5,30,15,30,20];

  5. function drawCircle(){
  6.         var canvas = document.getElementById("circle");
  7.         var ctx = canvas.getContext("2d");
  8.         var startPoint = 1.5 * Math.PI;
  9.         for(var i=0;i<data.length;i++){
  10.                 ctx.fillStyle = color[i];
  11.                 ctx.strokeStyle = color[i];
  12.                 ctx.beginPath();
  13.                 ctx.moveTo(200,150);
  14.                 ctx.arc(200,150,150,startPoint,startPoint-Math.PI*2*(data[i]/100),true);
  15.                 ctx.fill();
  16.                 ctx.stroke();
  17.                 startPoint -= Math.PI*2*(data[i]/100);
  18.         }
  19. }
  20. drawCircle();
  21. </script>
复制代码

    我们再来看看效果：

2c073fad-e873-3f9e-b364-cf46d8132773.jpg


    Canvas绘制饼图掌握这么多基本就够了，可以处理常见的数据统计了，只要注意这里我们扇形划分是按照百分比进行的，

那么你可以根据自己的需求灵活处理。对于其实位置和方向的调整也很简单，调整几个参数即可。
我们继续来制作饼图示例，结合CSS3。先说一下需求，就是一个展示的页面，
用饼图来展示数据，下方给出各个扇形的含义，最后给一个按钮点击进入详情。
饼图的上方有标题和简单的文字介绍，这些内容竖式结构，页面上显示散列，就是这么简单。
    我们首先来设置背景样式，用CSS3的渐变，那么首先页面代码需要先修改，
我们一步一步来，首先看下HTML代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>HTML5 Canvas Demo</title>
  6. <style type="text/css">
  7. body{
  8.         margin:0px;
  9.         padding:0px;
  10. }
  11. .bg{
  12.     position:absolute;
  13.     height:100%;
  14.     width:100%;
  15.         overflow-x: hidden;
  16.         overflow-y:hidden;
  17.     background-image: -moz-linear-gradient(top,#77D1F6, #2F368F);
  18.     background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #77D1F6),color-stop(1, #2F368F));
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. </html>
复制代码

    这样，我们就得到了一个渐变的背景，并且对webkit内核和moz内核的浏览器都可用，
同时设置没有滚动条。好，下面来设置显示的区域，加入渐变，那么我们将HTML代码修改如下：
  1. <div class="bg">
  2.         <div class="panelBg"></div>
  3. </div>
复制代码

    就是在内部加入了一个div层，那么相应的CSS代码如下：
  1. .panelBg{
  2.     position:absolute;
  3.     height:600px;
  4.     width:800px;
  5.     left:250px;
  6.     top:20px;
  7.     border-radius: 12px;
  8.     background-color:#000000;
  9.     opacity:0.5;
  10. }
复制代码

    因为我们要做层次的效果，且层间不能干扰，我们使用了绝对定位，同时设置属性，
这里还加入了圆角矩形的设置，圆角半径为12px，最后设置渐变效果opacity为0.5，
那么效果大家自己去看，我们继续来做：
  1. <div class="bg">
  2.         <div class="panelBg"></div>
  3.         <div class="panel">
  4.         </div>
  5. </div>
复制代码

    很简单，加了一个div，设置class为panel，那么CSS为：
  1. .panel{
  2.     position:absolute;
  3.     height:550px;
  4.     width:750px;
  5.     left:275px;
  6.     top:45px;
  7.     border-radius: 12px;
  8.     background-image: -moz-linear-gradient(top,#EBEBEB, #BFBFBF);
  9.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB),color-stop(1, #BFBFBF));
  10. }
复制代码

    也是用了渐变的背景，然后设置长宽和位置，加上圆角矩形，根据外层背景的长和宽，
我们预留的渐变边框为25px，那么内层的各个属性我们也不难算出来，那么我们就得到了现在的效果：
ed07c9da-7f42-3c6b-a673-e4648c0fa349.jpg 
    底板基本都做好了，我们就开始往里面填充内容吧，首先是HTML：
  1. <div class="bg">
  2.         <div class="panelBg"></div>
  3.         <div class="panel">
  4.                 <div id="section1">
  5.                 </div>
  6.                 <div id="section2">
  7.                 </div>
  8.                 <div id="section3">
  9.                 </div>
  10.         </div>
  11. </div>
复制代码

    要放置这三个块了，就设置三个层，然后进行样式处理：
  1. #section1{
  2.     border:1px solid red;
  3.     position:relative;
  4.     float:left;
  5.     width:235px;
  6.     height:530px;
  7.     top:10px;
  8.     left:10px;
  9. }
  10. #section2{
  11.     border:1px solid red;
  12.     position:relative;
  13.     float:left;
  14.     width:235px;
  15.     height:530px;
  16.     top:10px;
  17.     left:20px;
  18. }
  19. #section3{
  20.         border:1px solid red;
  21.     position:relative;
  22.     float:left;
  23.     width:235px;
  24.     height:530px;
  25.     top:10px;
  26.     left:30px;
  27. }
复制代码

    这里我留下了border属性，就是为了测试时定位用的，那么现在我们得到了这样的效果：
111c53b7-b968-33d7-b352-53c4fb55bbbb.jpg 
下面就是对这三块中的内容进行填充了，我们讲解一块，其它三个都是类似的，
很简单，首先我们设置标题title和副标题subTitle：
放到section1中：
  1.         <div id="section1">
  2.                 <div class="title">HTML5</div>
  3.                 <div class="subTitle">HTML5 是下一代的HTML，包含诸多新特性，比如绘制图形的canvas元素。</div>
  4.         </div>
复制代码

    样式代码如下：
  1. .title{
  2.     border:1px solid red;
  3.     position:relative;
  4.     margin:5px;
  5.     font-family:微软雅黑;
  6.     font-size:22px;
  7.     font-weight:bold;
  8.     text-align:center;
  9.     color:#58595B;
  10. }
  11. .subTitle{
  12.     border:1px solid red;
  13.     margin:5px;
  14.     font-family:微软雅黑;
  15.     font-size:14px;
  16.         height:70px;
  17.     font-weight:bold;
  18.         text-indent:2em;
  19.     color:#6D6E71;
  20. }
复制代码

    现在的效果为：
a3cf8950-18f6-3fce-bda1-2a211a777bdb.jpg 
    接下来我们要放置配置饼图的canvas了，绘制饼图的方法之前说过，就是一段JavaScript代码，
我们只需要留出位置即可：
  1.         <div id="section1">
  2.                 <div class="title">HTML5</div>
  3.                 <div class="subTitle">HTML5 是下一代的HTML，包含诸多新特性，比如绘制图形的canvas元素。</div>
  4.                 <div class="piechart">
  5.                         <canvas id="piechart1" width="225" height="168"></canvas>
  6.                 </div>
  7.         </div>
复制代码

    下面就是确定样式和绘制饼图了，只需调整圆心位置即可，将data数组放于方法内，
我们要设置三组data值，而color就是一组：
  1. .piechart{
  2.     border:1px solid red;
  3.     margin:5px;
  4.     height:170px;
  5. }
复制代码
  1. <script type="text/javascript">
  2. var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];

  4. function drawCircle(){
  5.         var data = [5,30,15,30,20];
  6.         var canvas = document.getElementById("piechart1");
  7.         var ctx = canvas.getContext("2d");
  8.         var startPoint= 1.5 * Math.PI;
  9.         for(var i=0;i<data.length;i++){
  10.                 ctx.fillStyle = color[i];
  11.                 ctx.strokeStyle = color[i];
  12.                 ctx.beginPath();
  13.                 ctx.moveTo(112,84);
  14.                 ctx.arc(112,84,84,startPoint,startPoint-Math.PI*2*(data[i]/100),true);
  15.                 ctx.fill();
  16.                 ctx.stroke();
  17.                 startPoint -= Math.PI*2*(data[i]/100);
  18.         }
  19. }
  20. drawCircle();
  21. </script>
复制代码

    我们来看看绘制好饼图后的效果：
5387a88d-c9cd-3e65-9dbc-ceb6c091ea77.jpg 
    下面放置对饼图的介绍，也很简单，我们来看一下，将下面的代码放置到piechart的div下面：
  1. <div class="description">
  2.                                 <div class="scroll-item item-even">
  3.                                         <div class="rect" style="background-color: rgb(119, 209, 246); "></div>
  4.                                         <div class="item-text">20% Opera</div>
  5.                                 </div>
  6.                                 <div class="scroll-item item-odd">
  7.                                         <div class="rect" style="background-color: rgb(44, 168, 224); "></div>
  8.                                         <div class="item-text">30% FireFox</div>
  9.                                 </div>
  10.                                 <div class="scroll-item item-even">
  11.                                         <div class="rect" style="background-color: rgb(54, 102, 176); "></div>
  12.                                         <div class="item-text">15% Safari</div>
  13.                                 </div>
  14.                                 <div class="scroll-item item-odd">
  15.                                         <div class="rect" style="background-color: rgb(47, 54, 143); "></div>
  16.                                         <div class="item-text">30% Chrome</div>
  17.                                 </div>
  18.                                 <div class="scroll-item item-even">
  19.                                         <div class="rect" style="background-color: rgb(39, 37, 95); "></div>
  20.                                         <div class="item-text">5% IE</div>
  21.                                 </div>
  22.                         </div>
复制代码

    其中涉及到的CSS样式为：
  1. .description{
  2.     border:1px solid #CCCCCC;
  3.     border-color: #636263 #464647 #A1A3A5;
  4.     margin:10px 5px;
  5.     height:165px;
  6.     border-radius: 4px;
  7. }
  8. .scroll-item {
  9.         position: relative;
  10.         width: 100%;
  11.         height: 32px;
  12.         border-bottom:1px solid gray;
  13.         cursor: pointer;
  14. }
  15. .item-even {
  16.         background-color: #E7E8EC;
  17. }

  19. .item-odd {
  20.         background-color: #E0ECF6;
  21. }
  22. .rect {
  23.         float: left;
  24.         margin-top: 5px;
  25.         margin-left: 5px;
  26.         width: 20px;
  27.         height: 20px;
  28.         border-radius: 3px;
  29. }
  30. .item-text{
  31.         margin-left: 5px;
  32.         height: 100%;
  33.         float: left;
  34.         font-size: 14px;
  35.         font-family: 微软雅黑;
  36.         vertical-align: middle;
  37.         display: inline-block;
  38.         line-height: 30px;
  39. }
复制代码

    其中没什么可多说的，就是设置了一下奇偶行的不同颜色，因为我们都是定死的，
所以就这么来做了，比较简单，剩下就是设置长宽，圆角的样式了，不是很难，
现在我们得到了这样的效果：
ba5c3b36-b137-34d8-912a-413ea5512caa.jpg 
    还有最后的一个按钮了，也很简单了，我们如下设置，接着上面的代码，编写：
  1. <div class="button"><span class="buttonText">查看详情 </span></div>
复制代码

    然后设置样式：
  1. .button{
  2.     border:1px solid #cccccc;
  3.     cursor:pointer;
  4.     margin:10px 5px;
  5.     height:40px;
  6.     text-align:center;
  7.     border-radius: 4px;
  8.     border-color: #636263 #464647 #A1A3A5;
  9.     text-shadow: 0 1px 1px #F6F6F6;
  10.     background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%);
  11.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9),color-stop(1, #A6A6A6));
  12. }
  13. .buttonText{
  14.     position:relative;
  15.     font-weight:bold;
  16.     top:10px;
  17.     font-family:微软雅黑;
  18.     color:#58595B;
  19. }
复制代码

    现在我们就完成了一组了，得到如下的效果：
7aebb6d7-e814-3ff5-aec1-709dc98b339c.jpg 
    比葫芦画瓢完成剩下两组，也很简单了，最后我们得到：
f4c5b5d9-aa9a-32a5-9a07-58679d3a9947.jpg 
1970-1-1 08:00 上传
下载附件 (53.09 KB)

    那么，这个例子也就做完了，主要是介绍利用Canvas绘制饼图，然后结合CSS制作一个小demo，
用于数据展示用，对浏览器要求比较高，而且基本排除了IE，暂时也就不太适合普通应用.
     
  
 









zppzzllll
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript绘制曲线、圆形饼图实例
10-27
JavaScript绘制曲线、圆形饼图实例
HTML5绘制饼图实例（二）
03-26
NULL 博文链接：https://sarin.iteye.com/blog/1149851
Html5饼图绘制（统计图）
liuyongfang0211的博客
01-19 9806
Html5饼图绘制（统计图） Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图（统计图）的方法。先看一下饼图效果： 这个图是动态生成的，根据传入的比例参数（数组），来动态绘制饼图。饼图的大小也是根据&lt;canvas&gt;高度来动态调整的。 全部代码如下： [html] &lt;!DOCTYPEhtml&g...
html5圆饼图插件,html5实现饼图和线图
weixin_31435039的博客
06-15 361
Pie Chart with HTML5 and jQuery - 1.0body {background: #fff;color: #333;font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-size: 0.9em;padding: 40px;}#container {900px;margin:0aut...
【一】结合html与Echarts绘制饼状图
最新发布
weixin_51179975的博客
11-14 1772
Echarts是一个由百度开发的基于JavaScript语言的可视化图表库，里面包含了折线图、饼状图、柱状图、3D图等上百种图表绘制方法，可将其嵌入到大数据可视化界面中，实现炫酷的图表效果。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox等）及多种设备，可随时随地任性展示。在html中运用Echarts绘制图表的方法很多，在这里以饼状图为例讲解如何使用。使用的编辑器为VSCode。
html5饼图的制作方法,html5制作饼图
weixin_34634231的博客
06-15 556
var jsondata=[{name:"技术部",num:95},{name:"研发部",num:3},{name:"市场部",num:50},{name:"攻关部",num:20},{name:"信息产业部",num:35},{name:"宣传部",num:50}];var colors=["#cb4539","#fec655","#feff63","#2ba54e","#2b81b0","#...
【Python】绘制饼图常见代码
wzk4869的博客
02-19 3219
【Python】绘制饼图常见代码
html5制作饼图
赵峰的专栏
12-17 7150
本文章将通过一个简单易懂的实例来想大家阐述如何利用html5的canvas来绘制一个跟随json数据的饼状图，稍作移植，它就可以作为一个轻量级的js饼状图框架。下面让我们来看看示例运行效果。。。
python+matplotlib绘制饼图散点图实例代码
12-24
本文是从matplotlib官网上摘录下来的一个实例，实现的功能是Python+matplotlib绘制自定义饼图作为散点图的标记，具体如下。 首先看下演示效果 实例代码： import numpy as np import matplotlib.pyplot as plt # ...
JavaScript使用百度ECharts插件绘制饼图操作示例
10-15
name: '饼图实例', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 100, name: 'part1'}, {value: 200, name: 'part2'}, {value: 300, name: 'part3'}, {value: 400, name: 'part4'...
用CSS画饼图
09-08
用CSS绘制饼图，针对移动端上的展示，建议在谷歌浏览器上打开效果更佳,上传了两个html文件，pie.html是css静态画饼图，pieAuto.html是用我自己写的插件可以根据传入的参数动态绘制饼图
强大的图表绘制工具，支持折线图、面积图、散点图、时间图、柱状图、条图、饼图、气泡图、圆环图、等
11-07
强大的图表绘制工具，支持折线图、面积图、散点图、时间图、柱状图、条图、饼图、气泡图、圆环图、范围（高至低）条形图、网状图等；支持图的拖拽缩放； 支持横纵轴缩放，多指缩放，展现动画、高亮、保存到 sdcard、从文件读取图表
CSS3/HTML5图表实例：圆饼的三角统计图表应用演示.rar
07-10
CSS3/HTML5图表实例：圆饼的三角统计图表应用演示，一共有6种图表运用效果，都是带有动画效果的统计图表，用HTML5做出的东西，广泛应用于后台管理和WEB在线OA系统中，学好HTML5/CSS3是今后的一个方向哦。
HTML5图表案例，表格+饼图
12-11
js+HTML5，表格可与饼图交互,适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
HTML5 调用百度地图API地理定位
热门推荐
技术成就梦想，知识改变命运 !
03-04 2万+
HTML5 调用百度地图API地理定位实例                                                   window.onload = function() {         if(navigator.geolocation) {             document.getElementById("status
圆圈统计图html,Html5饼图绘制实现统计图的方法
weixin_39697143的博客
05-31 404
Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果：这个图是动态生成的，根据传入的比例参数(数组)，来动态绘制饼图。饼图的大小也是根据高度来动态调整的。全部代码如下：Canvas测试//绘制饼图function drawCircle(canvasId, data_arr, color_arr,...
Python绘制饼状图
qq_45943022的博客
06-03 2万+
绘制饼图 matplotlib 模块使用pie函数绘制饼图，其调用方式如下： matplotlib.pyplot.pie(x, explode=None, labels=None, colors=None, autopct=None, pctdistance=0.6, shadow=False, labeldistance=1.1, startangle=None, radius=None, counterclock=True, wedgeprops=None, textprops=None, cent
用Python写一段生成饼形图代码
weixin_35754676的博客
12-17 911
生成饼形图的代码可以使用 Python 中的 Matplotlib 库来实现。 以下是一个简单的示例代码： import matplotlib.pyplot as plt # 定义饼图中各部分的大小 sizes = [15, 30, 45, 10] # 定义饼图中各部分的标签 labels = ['A', 'B', 'C', 'D'] # 绘制饼图 plt.pie(sizes, labels...
纯css画饼状图
weixin_45264424的博客
08-02 2118
一、饼图 <div class="pie"></div> .pie { width:100px; height:100px; border-radius:50%; background: yellowgreen; background-image: linear-gradient(toright,transparent 50%,#655 0); } .pie::before { content:''; display:b
利用C#用户和管理员绘制饼图实例
05-19
以下是一个使用C#和WinForms绘制饼图的简单示例： 首先，你需要在Visual Studio中创建一个新的WinForms应用程序项目。然后，你需要添加一个Chart控件到窗体上。 接下来，你需要编写代码来填充和显示图表。下面是一个简单的示例，其中包含一个按钮，点击该按钮会生成一个饼图： ```csharp using System; using System.Collections.Generic; using System.Windows.Forms; using System.Windows.Forms.DataVisualization.Charting; namespace PieChartExample { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { // Create a new chart series Series series = new Series("My Series"); // Add some data to the series series.Points.AddXY("A", 25); series.Points.AddXY("B", 50); series.Points.AddXY("C", 75); series.Points.AddXY("D", 100); // Set the chart type to pie chart1.Series.Clear(); series.ChartType = SeriesChartType.Pie; chart1.Series.Add(series); // Set some additional chart properties chart1.Legends[0].Enabled = true; chart1.Titles[0].Text = "My Pie Chart"; } } } ``` 在上面的代码中，我们首先创建了一个新的Series对象，并将数据添加到它中。然后，我们将图表类型设置为饼图，并将Series对象添加到Chart控件中。最后，我们还设置了一些其他的图表属性，例如启用图例和设置标题。 当用户单击按钮时，将会运行button1_Click事件处理程序，该处理程序将生成并显示饼图。你可以根据需要修改事件处理程序，以便动态生成数据并显示更复杂的饼图。 希望这可以帮助你开始使用C#和WinForms绘制饼图！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值