饼状图 - 编程之家

昨晚在项目中图层显示数据中添加了一个饼状图的显示效果，代码如下 private Chart CreatePie(double angle) { List<KeyValuePair<double，string>> values=new List<KeyValuePair<double，string>>(); values.Add(

作者：佚名时间：2020-09-27

SilverLight之利用Visifire生成柱状图、曲线图、饼状图

公共数据： private List<string> strListx = new List<string>() { "苹果", "樱桃", "菠萝", "香蕉", "榴莲", "葡萄", "桃子", "猕猴桃" }; private List<string> strListy = new List<string>() { "13", "75", "60", "38", "97",

作者：佚名时间：2020-09-27

安卓(Android)开发之自定义饼状图

先来看看效果图先分析饼状图的构成，非常明显，饼状图就是一个又一个的扇形构成的，每个扇形都有不同的颜色，对应的有名字，数据和百分比。

作者：佚名时间：2019-06-11

手把手教你用Android自定义饼状图

照例先上效果图通过该例子，你能学到什么：对Paint深入理解，画绘制饼图，矩形，文字等

作者：佚名时间：2019-07-21

MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图

MPAndroidChart开源图表库之饼状图　　为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，用起来非常灵活。MPAndroidChart同样拥有常用的图表

作者：佚名时间：2019-04-20

Android动态绘制饼状图的示例代码

项目里面的需求，当时搜索到MPAndroidChart库，可以实现，但是只是一个需求就引用偌大的一个库，感觉不太爽，打算自己自定义一个。

作者：佚名时间：2020-03-24

PHP+mysql+Highcharts生成饼状图

Mysql 首先我们建一张・chart_pie・表作为统计数据。 -- --表的结构`chart_pie` -- CREATETABLEIFNOTEXISTS`chart_pie`(

作者：佚名时间：2019-08-04

Python使用matplotlib的pie函数绘制饼状图功能示例

本文实例讲述了Python使用matplotlib的pie函数绘制饼状图功能。分享给大家供大家参考，具体如下：

作者：佚名时间：2019-11-10

swift开发笔记13 - 添加图表饼状图)

使用图表类库：http://www.appcoda.com/ios-charts-api-tutorial/ 下载其类库，解压缩有找到charts目录，拷贝到项目文件夹根目录下，如下图：在charts目录中把Charts.xcodeproj 文件拖到Xcode项目中如下图：点击上图link binary with libraries 中的加号，添加 charts.framework到项目中，

作者：佚名时间：2020-05-26

通过JFreeChart的饼状图显示XML

<chart> <set label="Paper Cost" value="25" /> <set label="Binding" value="20" /> <set label="Printing Cost" value="20" /> <set label="Royality" value="15" /> <set label="Transportation Cost" value="10

作者：佚名时间：2020-05-29

arcgis api for flex之专题图制作饼状图，柱状图等

最近公司给我一个任务，就是利用arcgis api for flex实现在地图上点（业务数据）直接显示饼状图以及柱状图的专题图制作，而不是通过点击点显示气泡窗口的形式来实现，这个公司已经实现了。经过一段时间的摸索，参照一些网上资源，目前大概弄出来了，里面还有待完善的地方的。效果图如下：（1）Chart.mxml，主要的展示地图专题图效果的页面

作者：佚名时间：2019-07-20

利用html5 canvas动态画饼状图

先来看效果图这里并没引用jquery等第三方库，只是用dom操作和canvas的特性编写的。 canvas画圆大体分为实心圆和空心圆。根据需求分析知道该圆为实心圆。 1.先用canvas画实心圆 //伪代码 var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); ctx.beginPat

作者：佚名时间：2019-05-27

jqplot AJAX JSON对象创建饼状图

上篇文章为柱状图，这篇为饼状，主要是渲染的方式和构建JSON对象不同 WEB端： /* 饼状图函数 */ /* 返回JSON对象必需类似于[[['name1',100],['name2',100]]]，jqplot 自动换算成 name1:50%,name2:50% */ function createPieChar

作者：佚名时间：2020-05-19

.net 饼状图，，， ajax异步请求数据返回xml格式的数据

首先引用js <script src="../../js/FusionCharts.js" type="text/javascript"></script> 选择flash 饼状图 function NowResidentsParameter() { $.ajax({ type: "Post",

作者：佚名时间：2020-05-26

Angular2组件与Echarts饼状图交互之饼图制作

一、前言 1.基于ng4项目 2.组件包括：根组件app和饼状图组件echart 二、饼状图开发过程 1、添加插件 echart cnpm install echarts --save 2、创建组件 echart ng g component echart 三、代码编写 echart.component.css .nf-chart{ width:100%; height:380px

作者：佚名时间：2020-04-24

Angular2组件与Echarts饼状图交互之添加点击事件

参见Echarts官网：http://echarts.baidu.com/api.html#events.%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6 events.鼠标事件鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下，其它图表诸如饼图可能会有部分附加参数。鼠标事件包括'click'，'dblclick'，'mousedown'，'

作者：佚名时间：2020-04-24

canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

制作饼状图<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas绘制扇形图</title><style>body{background:#ccc;}canvas{background:#fff;}</style></head><body><canvas id="myCanvas"></canvas><script>(function(){//定义数据var data = [{title:"apple", value:0.24, color:"green"},{title:"三星", value:0.26, color:"yellow"},{title:"华为", value:0.13, color:"orange"},{title:"锤子", value:0.17, color:"red"},{title:"小米", value:0.08, color:"purple"},{title:"其他", value:0.12, color:"cyan"}];var w=800;var h=600;var cx=w/2;var cy=h/2;var r=200;//获取canvas元素var canvas=document.getElementById("myCanvas");//设置画布宽高canvas.width=w;canvas.height=h;//获取绘图环境var ctx=canvas.getContext("2d");ctx.font="18px Micorsoft YaHei";//遍历数据var beginAngle=Math.PI/6; //开始的点data.forEach(function(item){//弧度范围var angle=item.value*2*Math.PI;//结束的点var endAngle=beginAngle+angle;//绘制扇形区域ctx.beginPath();ctx.moveTo(cx,cy);ctx.arc(cx,cy,r,beginAngle,endAngle);ctx.fillitem.color;ctx.fill();//写字var txtAngle=beginAngle+angle/2;if(txtAngle>=Math.PI/2 && txtAngle<Math.PI*3/2){ctx.textAlign="end";}else{ctx.textAlign="start";}var tx=cx+(r+10)*Math.cos(txtAngle);//Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数；var ty=cy+(r+10)*Math.sin(txtAngle);//Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间；ctx.fillText(item.title+" "+item.value*100+"%",tx,ty);beginAngle=endAngle;})})()</script></body></html>Konva制作动态饼状图<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>扇形图</title><style>body{background:#ccc;}.konvajs-content{background:#fff;}</style></head><body><div id="box"></div><script src="konva.js"></script><script>var radius=150;var duration=1;var data = [{title:"apple", value:0.24, color:"pink"},{title:"三星", value:0.26, color:"skyblue"},{title:"华为", value:0.13, color:"orange"},{title:"锤子", value:0.17, color:"red"},{title:"小米", value:0.08, color:"purple"},{title:"其他", value:0.12, color:"cyan"}];//创建舞台var stage=new Konva.Stage({container:"#box",width:800,height:600})//创建层var layer=new Konva.Layer({});stage.add(layer);//创建扇形的组var wedgeGroup=new Konva.Group({x:stage.getWidth()/2,y:stage.getHeight()/2});//创建文字的组var textGroup=new Konva.Group({x:stage.getWidth()/2,y:stage.getHeight()/2})var startAngle=0;data.forEach(function(item,index){var angle=item.value*360;//绘制扇形var wedgeShape=new Konva.Wedge({x:0,y:0,radius:radius,angle:0,rotation:startAngle,fill:item.color,name:angle+""});wedgeGroup.add(wedgeShape);//绘制文字var textAngle=startAngle+angle/2;//文字对应的角度var textX=Math.cos(textAngle/180*Math.PI)*(radius+30);var textY=Math.sin(textAngle/180*Math.PI)*(radius+30);var text=new Konva.Text({text:item.title,x:textX,y:textY,fill:item.color,fontSize:12,visible:false});if(textAngle>90&&textAngle<270){text.x(text.x()-text.getWidth())}textGroup.add(text);startAngle+=angle;});//绘制外圆var outerCircle=new Konva.Circle({x:stage.getWidth()/2,y:stage.getHeight()/2,radius:radius+5,stroke:"#ccc",strokeWidth:1});layer.add(wedgeGroup);layer.add(textGroup);layer.add(outerCircle);layer.draw();//设置动画来让扇形动起来var wedgeList=wedgeGroup.getChildren();var animateIndex=0;playAnimate();//调用函数执行动画function playAnimate(){if(animateIndex>=data.length){return;}var wedge=wedgeList[animateIndex];var angle=Number(wedge.name());var animateDuration=duration*(angle/360);wedge.to({angle:angle,duration:animateDuration,onFinish:function(){textGroup.getChildren()[animateIndex].show();animateIndex++;playAnimate();}})}</script></body></html>制作折线图<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>折线图</title><style>body{background:#ccc;}</style></head><body><canvas id="myCanvas"></canvas><script>//定义相关数据最大100var data=[{year:"2008",value:40},{year:"2009", value:48},{year:"2010", value:50},{year:"2011", value:70},{year:"2012", value:60},{year:"2013", value:40},{year:"2014", value:20},{year:"2015", value:60},{year:"2016", value:80},{year:"2017", value:90}];var xWidth=40;//x轴每一个格子宽度var yWidth=40;//y轴每一个格子宽度var x=100,y=500;//原点坐标var len=data.length;//数据长度//获取canvas元素var canvas=document.querySelector("#myCanvas");canvas.width=800;canvas.height=600;canvas.style.border="1px solid #ccc";canvas.style.backgroundColor="#fff";//获取绘图环境var ctx=canvas.getContext("2d");//绘制坐标系ctx.beginPath();//x轴var xLength=xWidth*(len+1);//x轴长度ctx.moveTo(x,y);ctx.lineTo(x+xLength,y);//箭头ctx.lineTo(x+xLength-10,y-10);//上箭头ctx.moveTo(x+xLength,y);//下箭头ctx.lineTo(x+xLength-10,y+10);//下箭头//刻度ctx.textAlign=&#

作者：佚名时间：2019-02-10

封装构造函数，用canvas写饼状图和柱状图

封装构造函数，用canvas写饼状图和柱状图封装函数// 场景function XDLScence( options ) {this.stage = options.stage;//执行场景的初始化this.init = options.init || XDLScence.voidFn;//执行场景的进场动画this.pre = options.pre || XDLScence.voidFn;//执行场景的出场动画this.post = options.post || XDLScence.voidFn;this.layers = options.layers || [new Konva.Layer()];this.name = options.name || '';this.init();}XDLScence.prototype = {constructor: XDLScence,voidFn: function() {},CurrentScence: null,//场景要进入舞台，只需要调用场景的 play方法。play: function () {var _this = this;// doPre,var doPre = function doPre() {// stage.add(_this.layer);// 把当前层添加到舞台_this.layers.forEach(function( val ){_this.stage.add( val );});XDLScence.currentScene = _this;_this.pre();};//如果不是第一个场景，先执行当前场景的出场动画，然后执行下一个场景的入场动画//需要在场景的post方法中执行传进去的 next 方法。if (XDLScence.currentScene) {//执行上一个场景的出场动画XDLScence.currentScene.post(doPre);} else {//如果是第一个场景直接执行入场动画doPre();}}// play};//=============>S=============柱状图数据demo// var data = [{// name: '百度', value: .2, color: 'lightgreen'// },{// name: '阿里', value: .4, color: 'lightgreen'// },{// name: '新浪', value: .1, color: 'lightgreen'// },{// name: '搜狐', value: .1, color: 'lightgreen'// },{// name: '360', value: .2, color: 'lightgreen'// }];//柱状图构造函数function Histogram(option) {this.group = new Konva.Group({x: option.x,y: option.y});this.init(option);}//柱状图的原型对象Histogram.prototype = {constructor: Histogram,init: function( option ) {option.data = option.data || [];//底线的宽度option.blWidth = option.blWidth || 2;option.blColor = option.blColor || 'lightgreen';option.width = option.width || 200;option.height = option.height || 200;option.fontSize = option.fontSize || 12;//把最高的柱状图的高度换算成柱状图要求的高度。var maxValue = 0;for(var i = 0; i < option.data.length; i++ ) {maxValue = maxValue > option.data[i].value ? maxValue : option.data[i].value;}option.height = option.height / maxValue;//创建底线var bottomLine = new Konva.Line({strokeWidth: option.blWidth,stroke: option.blColor,points: [ 0, 0, option.width, 0 ],lineCap: 'round',lineJoin: 'round'});this.group.add( bottomLine );//rectWidthvar rectAllWidth = option.width / option.data.length;for(var i = 0; i < option.data.length; i++ ) {var tempData = option.data[i];//创建每个柱状图var rect = new Konva.Rect({x: rectAllWidth * (1/4 + i),y: -1 * (option.height * tempData.value) - 1/2*option.blWidth,width: 1/2 * rectAllWidth,height: option.height * tempData.value,fill: tempData.color,shadowBlur: 5,shadowColor: tempData.color,// shadowOffset: {x : 10, y : 10},shadowOpacity: 0.5,opacity: .5,name: 'histogramRect',cornerRadius: 5});//创建柱状图百分比文本var text = new Konva.Text({x: rectAllWidth * i,y: -1 * (option.height * tempData.value) - 1/2*option.blWidth - option.fontSize -3,fontSize: option.fontSize,fill: tempData.color,fontFamily: '微软雅黑',text: tempData.value * 100 + '%',name: 'txt',width: rectAllWidth,align: 'center'});//创建柱状图名字文本var nameText = new Konva.Text({x: rectAllWidth * (1/2 + i),y: option.blWidth + 3,fontSize: option.fontSize,fill: tempData.color,fontFamily: '微软雅黑',text: tempData.name,rotation: 30});this.group.add( rect );this.group.add( text );this.group.add( nameText );}},playAnimate: function() {this.group.to({duration: .1,opacity: 1});this.group.find('.histogramRect').each(function( value, index ) {var oldY = value.y();var oldHeight = value.height();value.y(0);value.height(0);value.to({duration: .8,y: oldY,height: oldHeight,opacity: .9});});this.group.find(".txt").each(function(val){var oldY = val.y();val.y(0);val.opacity(.1);val.to({duration: .8,y: oldY,opacity: 1});});},addToGroupOrLayer: function( group ) {group.add(this.group);}};/*使用案例dmeo：var data = [{name: '阿里', value: .2, color: 'lightgreen'},{name: '百度', value: .4, color: 'red'},{name: '新浪', value: .1, color: 'blue'},{name: '盛大', value: .1, color: '#8E8E38'},{name: '360', value: .2, color: 'purple'}];var his = new Histogram({data: data,x: 1/8 * stage.width(),y: 3/4 * stage.height(),blWidth: 2,blColor: 'lightblue',width: 3/4 * stage.width(),height: 1 * stage.height(),fontSize: 14});his.addToGroupOrLayer(layer);layer.draw();his.playAnimate();layer.on('click',function(){his.playAnimate();});*///=============>E 柱状图=============//=============>S 进度条=============function ProgressBar(option) {this.group = new Konva.Group({x: option.x,y: option.y});this.maxWidth = option.width;this.drawLayer = null;this.init(option);}ProgressBar.prototype = {constructor: ProgressBar,init: function( option ) {var innerRect = new Konva.Rect({x: 0,y: 0,width: 0,height: option.height,fill: option.fillColor,name: 'innerRect',cornerRadius: 1/2 * option.height});this.group.add( innerRect );var outerRect = new Konva.Rect({x: 0,y: 0,width: option.width,height: option.height,strokeWidth: option.strokeWidth,stroke: option.strokeColor,name: 'outerRect',cornerRadius: 1/2 * option.height});this.group.add( outerRect );var drawText = new Konva.Tex

作者：佚名时间：2019-02-10

Highcharts学习之数据列

数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心。

作者：佚名时间：2019-01-05