跟KingDZ学HTML5之五 探究Canvas之图像与文字彩民之

2019-10-11 05:44 来源:未知

例子一:

3、饼图

饼图重若是用来表示数据的占比,给人一眼就足以见见数据的占比大小。饼图使用pie()函数绘制。

import matplotlib.pyplot as plt# 设置绘图的主题风格(不妨使用R中的ggplot分隔)plt.style.use# 构造数据edu = [0.2515,0.3724,0.3336,0.0368,0.0057]labels = ['苹果','香蕉','梨','猕猴桃','桔子']explode = [0,0.1,0,0,0] # 用于突出显示大专学历人群colors=['#FEB748','#EDD25D','#FE4F54','#51B4FF','#dd5555'] # 自定义颜色# 中文乱码和坐标轴负号的处理plt.rcParams['font.sans-serif'] = ['SimHei']plt.rcParams['axes.unicode_minus'] = False# 将横、纵坐标轴标准化处理,保证饼图是一个正圆,否则为椭圆plt.axes(aspect='equal')# 控制x轴和y轴的范围plt.xlimplt.ylim# 绘制饼图plt.pie(x = edu,# 绘图数据 explode=explode, # 突出显示香蕉人群 labels=labels, # 添加水果销量水平标签 colors=colors, # 设置饼图的自定义填充色 autopct='%.1f%%', # 设置百分比的格式,这里保留一位小数 pctdistance=0.8,# 设置百分比标签与圆心的距离 labeldistance = 1.15, # 设置销量水平标签与圆心的距离 startangle = 180, # 设置饼图的初始角度 radius = 1.5, # 设置饼图的半径 counterclock = False, # 是否逆时针,这里设置为顺时针方向 wedgeprops = {'linewidth': 1.5, 'edgecolor':'green'},# 设置饼图内外边界的属性值 textprops = {'fontsize':12, 'color':'k'}, # 设置文本标签的属性值 center = , # 设置饼图的原点 frame = 1)# 是否显示饼图的图框,这里设置显示# 删除x轴和y轴的刻度plt.xticksplt.yticks# 添加图标题plt.title('2018年水果销量分析')# 显示图形plt.show()

效果图:

彩民之家论坛9066777 1image

简介下pie函数参数:x: 内定绘图的数据explode:钦命饼图有个别部分的凸起呈现,即表现爆炸式labels:为饼图增添标签表达,类似于图例表达colors:钦赐饼图的填充色autopct:设置百分比格式,如'%.1f%%'为保留一人小数shadow:是不是增多饼图的影子效果pctdistance:设置百分比标签与圆心的相距labeldistance:设置各扇形标签与圆心的距离;startangle:设置饼图的起头摆放角度, 180为水平;radius:设置饼图的半径大小;counterclock:是不是让饼图按逆时针顺序显示, True / False;wedgeprops:设置饼图内外边界的习性,如边界线的粗细、颜色等, 如wedgeprops = {'linewidth': 1.5, 'edgecolor':'green'}textprops:设置饼图普通话本的属性,如字体大小、颜色等;center:钦点饼图的主题点地点,默感觉原点frame:是还是不是要展现饼图背后的图框,假若设置为True的话,需求同临时候决定图框x轴、y轴的限定和饼图的宗旨岗位;

2.用 drawImage 方法将图像插入到 canvas 中。

事例四:绘图加上文字

4、散点图

散点图重要的功用是判别多个变量之间涉及的强弱也许是还是不是存在关联。

散点图由scatter()方法绘制。

import numpy as npimport matplotlib.pyplot as plt# 数据个数n = 50# 均值为0, 方差为1的随机数x = np.random.normaly = np.random.normal# 计算颜色值color = np.arctan2# 绘制散点图plt.scatter(x, y, s = 75, c = color, alpha = 0.5)# 设置坐标轴范围plt.xlim((-1.5, 1.5))plt.ylim((-1.5, 1.5))# 不显示坐标轴的值plt.xticks(([-1,0,1,2,3,4]))plt.yticks(([-1,0,1,2,3,4]))plt.show()

效果图:

彩民之家论坛9066777 2image

彩民之家论坛9066777 3

例子三:

读书Python中有不知道推荐插足沟通群

 号:960410445 群里有志同道合的小伙伴,互帮互助, 群里有不错的视频学习教程和PDF!

Matplotlib是最盛行的用来绘制2D数目图表的Python库,能够在种种平台上应用,能够绘制散点图、柱状图、饼图等。

上面大家早先 那节课的第三个内容----------文字

效果:两条边

5、箱线图

箱线图日常用来彰显数据大小、占比、趋势等等的显现,其含有部分总结学的均值、分位数、极值等等计算量,由此,该图消息量比较大,不只可以够解析不一样体全面据平均水平差距(需在箱线图中参预均值点),仍可以揭露数据间离散程度、分外值、布满差别等等。

应用boxplot()方法绘制。

import numpy as npimport matplotlib.pyplot as pltimport pandas as pdnp.random.seed #设置随机种子df = pd.DataFrame(np.random.rand,columns=['A', 'B', 'C', 'D'])#先生成0-1之间的5*4维度数据,再装入4列DataFrame中df.boxplot() #也可用plot.box()plt.show()

效果图:

彩民之家论坛9066777 4image

咱俩先用最简单易行的艺术写二个事例

绘制橡皮筋球体

2、折线图

折线图首要用来表示数据变化的偏向。折线图是直线将不一致的点连接起来。

# 导入绘图模块import matplotlib.pyplot as plt#构建数据jan_sales = [3010,4029,5021,3056]# 中文乱码的处理plt.rcParams['font.sans-serif'] =['SimHei']plt.rcParams['axes.unicode_minus'] = Falsex = ['苹果','香蕉','梨','猕猴桃']#第一个参数是x轴,第二参数时y轴数据,第三个参数是线的颜色,第二个参数是线条的粗细plt.plot(x,jan_sales,'r',lw=5)# 4 line w# 添加标题plt.title('水果2018年度1月份销量图')plt.ylim([2000,15000])# 为每个点添加数值标签for x,y in enumerate(jan_sales): plt.text(x,y 100,'%s' %y,ha='center')# 显示图形plt.show()

效果图:

彩民之家论坛9066777 5image

折线图通过调用plot()方法绘制。

function draw() {          var c = document.getElementById("mycanvas");          var cxt = c.getContext("2d");          var img = new Image();          img.onload = function () {              cxt.drawImage(img, 0, 0);          }          img.src = "2.png";      }

彩民之家论坛9066777 6image

7、气泡图

气泡图用于判别3个变量之间是还是不是存在某种关联。它跟散点图有一点点类似,只可是气泡图以气泡大小作为新的维度

import pandas as pdimport matplotlib.pyplot as pltimport pandas as pdd = {"时间":pd.Series([2006,2007,2008,2009,2010]), "数量":pd.Series([10,200,120,150,300]), "大小":pd.Series([50,130,40,50,160]), "分类":pd.Series([1,2,0,1,2]), "判断":pd.Series([True,True,True,True,True])}df=pd.DataFrame#先定义气泡大小,rank 函数将大小列进行大小分配,越大的值分配结果也越高#n 为倍数,用来调节气泡的大小,且看后头size=df['大小'].rank()n=20#定义一个字典,将颜色跟对应的分类进行绑定color={0:'red',1:'blue',2:'orange'}#增加color的参数,用列表解析式将data分类中的每个数据的数字映射到前面color的颜色中plt.scatter(df['数量'],df['大小'],color=[color[i] for i in df['分类']],s=size*n,alpha=0.6)plt.show()

效果图:

彩民之家论坛9066777 7image

气泡图用也是scatter方法绘制,和散点图同样。差距在于点的轻重缓急不平等,散点图的点都以同等的,而气泡图点的大大小小不均等。

如上正是柱状图、散点图、气泡图、折线图的落到实处情势。希望给大家带来扶助。

第一种:

彩民之家论坛9066777 8image

数码分析就是将数据以各个图片的花样显示给官员,供领导做定夺用,因而熟谙通晓饼图、柱状图、线图等图表制作是一个数码分析师必备的手艺。Python有四个相比突出的图样制作框架,分别是Matplotlib和Pyechart。本文首要陈说使用Matplotlib制作各样数据图表。

 

 import turtle t = turtle.Pen() turtle.bgcolor sides=evali(input("输入要绘制的边的数目,请输入2-6的数字!")) colors=["red","yellow","green","blue","orange","purple"] for x in xrange: t.pencolor(colors[x%sides]) t.forward(x*3/sides x) t.left(360/sides 1) t.width(x*sides/200) print("####结束####")

1、柱状图

是一种以星型或长方体的高度为变量的表明图形的计算报告图,由一多级高度不等的纵向条纹表示数据分布的情状,用来相比比较多少个或上述的价值(分化临时候间或许区别口径),唯有二个变量,平日采用于非常的小的数量集深入分析。柱状图能够用来相比数据里面包车型客车有一些,能够用来察看某一风浪的变化趋势,柱状图亦可横向排列,或用多维形式发挥。达成代码:

# 导入绘图模块import matplotlib.pyplot as plt# 构建数据sales = [7125,12753,13143,8635]# 中文乱码的处理,rcParams也可以用于设置图的分辨率,大小等信息plt.rcParams['font.sans-serif'] =['SimHei']plt.rcParams['axes.unicode_minus'] = False# 绘图,第一个参数是x轴的数据,第二个参数是y轴的数据,第三个参数是柱子的大小,默认值是1,color是柱子的颜色,alpha是柱子的透明度plt.bar, sales, 0.4,color='r', alpha = 0.8)# 添加轴标签plt.ylabel# 添加标题plt.title('水果2018年度销量')# 添加刻度标签plt.xticks,['苹果','香蕉','梨','猕猴桃'])# 设置Y轴的刻度范围plt.ylim([5000,15000])# 为每个条形图添加数值标签for x,y in enumerate: plt.text(x,y 100,'%s' %y,ha='center')# 显示图形plt.show()

效果图:

彩民之家论坛9066777 9image

只需绘制柱状图的函数bar就能够将柱状图长方形或长方体从垂直方向变为水平方向。实当代码:

# 导入绘图模块import matplotlib.pyplot as plt# 构建数据sales = [7125,12753,13143,8635]# 中文乱码的处理plt.rcParams['font.sans-serif'] =['SimHei']plt.rcParams['axes.unicode_minus'] = Falsex = ['苹果','香蕉','梨','猕猴桃']# 绘图plt.barh, sales, 0.4,color='r', alpha = 0.8)# 添加轴标签plt.ylabel# 添加标题plt.title('水果2018年度销量')# 添加刻度标签plt.yticks,['苹果','香蕉','梨','猕猴桃'])# 设置Y轴的刻度范围plt.xlim([5000,15000])# 为每个条形图添加数值标签for x,y in enumerate: plt.text(y 0.2,x,'%s' %y,va='center')# 显示图形plt.show()

效果图:

彩民之家论坛9066777 10image

除去bar()函数产生barh()之外。还应该有任何多少个地方要做修改,在给各样条形图增加数值标签时,将ha='center'改为va='center',将增加x轴标签的措施从xlabel改为ylabel。

柱状图和折线图混合使用柱状图能够和折线图混合使用,用来表示某一个数指标变化趋势,下边是例证的柱状图表示水果的年份销量,折线图表示水果十一月份的销量。

代码:

# 导入绘图模块import matplotlib.pyplot as pltjan_sales = [3010,4029,5021,3056]# 构建数据sales = [7125,12753,13143,8635]# 中文乱码的处理plt.rcParams['font.sans-serif'] =['SimHei']plt.rcParams['axes.unicode_minus'] = Falsex = ['苹果','香蕉','梨','猕猴桃']plt.plot(x,jan_sales,'r')# 折线 1 x 2 y 3 colorplt.plot(x,jan_sales,'g',lw=5)# 4 line w# 绘图plt.bar, sales, 0.4,color='b', alpha = 0.8)# 添加轴标签plt.ylabel# 添加标题plt.title('水果2018年度销量')# 添加刻度标签plt.xticks,['苹果','香蕉','梨','猕猴桃'])# 设置Y轴的刻度范围plt.ylim([2000,15000])# 为每个条形图添加数值标签for x,y in enumerate: plt.text(x,y 100,'%s' %y,ha='center')# 显示图形plt.show()

效果图:

彩民之家论坛9066777 11image

下边大家写一个事例表明一下。我们看一下就知道了。

彩民之家论坛9066777 12image

6、雷达图

雷达图可以用来展现二个周期数值的扭转,也足以用来呈现对个指标/维度之间的涉及

import numpy as npimport matplotlib.pyplot as plt#标签labels = np.array(['语文','数学','英语','生物','物理','化学'])#数据个数dataLenth = 6#数据data = np.array([7,4,3,6,4,8])angles = np.linspace(0, 2*np.pi, dataLenth, endpoint=False)data = np.concatenate((data, [data[0]])) # 闭合angles = np.concatenate((angles, [angles[0]])) # 闭合fig = plt.figure()ax = fig.add_subplot(111, polar=True)# polar参数!!ax.plot(angles, data, 'bo-', linewidth=2)# 画线ax.fill(angles, data, facecolor='r', alpha=0.25)# 填充ax.set_thetagrids(angles * 180/np.pi, labels, fontproperties="SimHei")ax.set_title("matplotlib雷达图", va='bottom', fontproperties="SimHei")ax.set_rlimax.gridplt.show()

效果图:

彩民之家论坛9066777 13image

彩民之家论坛9066777 14

 import turtle t = turtle.Pen() turtle.bgcolor #sides=evali(input("输入要绘制的边的数目,请输入2-6的数字!")) sides=6 colors=["red","yellow","green","blue","orange","purple"] for x in range: t.pencolor(colors[x%sides]) t.forward(x*3/sides x) t.left(360/sides 1) t.width(x*sides/180) t.left print("####结束####")

好了,图文精炼的入门就到那了,好文要顶啊!!!

效能图如下:

职能图如下。

例子二:

function draw() {          var c = document.getElementById("mycanvas");          var cxt = c.getContext("2d");          cxt.fillStyle = "#0f0";          cxt.font = "bold 20px Arial";          cxt.textBaseline = "top";          cxt.fillText("KingDZ原创", 50, 50);          //换种方式          cxt.font = "italic 20px 微软雅黑";          cxt.strokeText("KingDZ原创", 50, 100);      }

代码:

世家好,那节课我们继续教师 canvas 那一个标签的局地科学普及的采取,呵呵,那几个标签也许确实挺有用途的。

 import turtle t = turtle.Pen() turtle.bgcolor sides=6 colors=["red","yellow","green","blue","orange","purple"] for x in xrang: t.pencolor(colors[x%sides]) t.forward(x*3/sides x) t.left(360/sides 1) t.width(x*sides/200) print("####结束####")

 

 import turtle t = turtle.Pen() turtle.bgcolor my_name=turtle.textinput("输入你的姓名","你的名字?") colors=["red","yellow","purple","blue"] for x in xrange: t.pencolor(colors[x%4]) t.penup() t.forward t.pendown() t.write(my_name,font=("Arial",int,"bold")) t.left turtle.done() print("####结束####")

本条我们看想不想,绘制矩形的 这几个 东东

能够做成交互的,利用eval函数获得顾客想绘制的边数

彩民之家论坛9066777 15

功用图如下:

先是个绘制带 fillStyle 填充的文字,后面一个绘制独有 strokeStyle 边框的文字。

彩民之家论坛9066777 16image

彩民之家论坛9066777 17

作用图如下:

好了,看一下职能啊。


好了,起始裁剪,其实正是一些数字的主题材料【笔者上边的那张靓妹是 200*200】

function draw() {          var c = document.getElementById("mycanvas");          var cxt = c.getContext("2d");          var img = new Image();          img.onload = function () {              cxt.drawImage(img, 80, 0, 100, 100, 50, 50, 100, 100);          }          img.src = "1.jpg";      }

第二种:

彩民之家论坛9066777 18

drawImage(image, x, y, width, height)

第三种:

drawImage(image, x, y)   

那节课程首先表达的是 如何才 canvas 中插入图像。

中间 image 是 image 恐怕 canvas 对象,x 和 y 是其在对象 canvas 里的前奏坐标

canvas 插入图像的手续:呵呵,又来了。

fillText 和 strokeText。

除此以外4个参数设置源图像中的地点和中度小幅度。这么些参数允许你在彰显图像前动态裁剪源图像。

1.先是当然希图一张图片了。

drawImage 方法 有三种形态的参数能够选拔

那回为了看见效果,大家利用那张图纸,我们想方法只要  她的脑部 

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

function draw() {      var c = document.getElementById("mycanvas");      var cxt = c.getContext("2d");      var img = new Image();      img.onload = function () {          //cxt.drawImage(img,0,0);          for (i = 0; i < 4; i  ) {              for (j = 0; j < 4; j  ) {                  cxt.drawImage(img, j * 50, i * 50, 50, 50);              }          }      }      img.src = "2.png";  }

双方的参数一样:要绘制的文字和文字的岗位(x,y) 坐标。还会有三个可选选项——最大幅度面。就算必要的话,浏览器会缩减文字以让它适应钦点宽度。

见状了吗?只剩下贰个脑袋了。

参数就毫无说的老子@除了啊,图像的高和宽,呵呵。

最复杂drawImage 杂使用方法,包涵上述5个参数外,

有多个格局能够绘制文字:

版权声明:本文由彩民之家高手论坛发布于编程技术,转载请注明出处:跟KingDZ学HTML5之五 探究Canvas之图像与文字彩民之