当前位置: 首页 > news >正文

Python数据可视化-第2章-使用matplotlib绘制简单图表

环境

开发工具

VSCode

库的版本

numpy==1.26.4
matplotlib==3.10.1
ipympl==0.9.7

教材

本书为《Python数据可视化》一书的配套内容,本章为第2章 使用matplotlib绘制简单图表
本文主要介绍了折线图、柱形图或堆积柱形图、条形图或堆积条形图、堆积面积图、直方图、饼图或圆环图、散点图或气泡图、箱形图、雷达图、误差棒图等绘制的图。
在这里插入图片描述

参考

政务可视化设计经验-图表习惯

数据可视化设计必修课(一):图表篇

一文讲透 | 大屏数据可视化图表选用指南

第2章 使用matplotlib绘制简单图表

绘制折线图

plot()函数

plot()函数可以快速地绘制折线图

plot(x, y, fmt, scalex=True, scaley=True, data=None, 
label=None, *args, **kwargs) 

x:表示x轴的数据,默认值为range(len(y))。
y:表示y轴的数据。
fmt:表示快速设置线条样式的格式字符串。
label:表示应用于图例的标签文本。

plot()函数会返回一个包含Line2D类对象(代表线条)的列表。

绘制具有多个线条的折线图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
arr = np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]])
lines= plt.plot(arr[0], arr[1:])
print("lines ",lines)
plt.show()

输出如下:

lines [<matplotlib.lines.Line2D object at 0x0000024B4C77E6C0>, <matplotlib.lines.Line2D object at 0x0000024B4C77E6F0>, <matplotlib.lines.Line2D object at 0x0000024B4C77E7E0>]
在这里插入图片描述

实例1:未来15天最高气温和最低气温
# 01_maximum_minimum_temperatures
import matplotlib.pyplot as plt
import numpy as np
x = np.arange(4, 19)
y_max = np.array([32, 33, 34, 34, 33, 31, 30, 29, 30, 29, 26, 23, 21, 25, 31])
y_min = np.array([19, 19, 20, 22, 22, 21, 22, 16, 18, 18, 17, 14, 15, 16, 16])
# 绘制折线图
plt.plot(x, y_max)
plt.plot(x, y_min)
plt.show()

输出为:
在这里插入图片描述

绘制柱形图或堆积柱形图

bar()函数

使用pyplot的bar()函数可以快速地绘制柱形图或堆积柱形图 。

bar(x, height, width=0.8, bottom=None, align='center', tick_label=None, 
xerr=None, yerr=None, **kwargs)

x:表示柱形的x坐标值。
height:表示柱形的高度。
width:表示柱形的宽度,默认值为0.8。
bottom:表示柱形底部的y值,默认值为0。
align:表示柱形的对齐方式,包括center和edge两种,其中center表示将柱形中心与刻度线对齐;edge表示将柱形的左边或右边与刻度线对齐。
tick_label:表示柱形对应的刻度标签。
xerr,yerr :若未设为None,则需要为柱形图添加水平/垂直误差棒

bar()函数会返回一个BarContainer类的对象
BarContainer类的对象是一个包含柱形或误差棒的容器,它亦可以视为一个元组,可以遍历获取每个柱形或误差棒。
BarContainer类的对象也可以访问patches或errorbar属性分别获取图表中所有的柱形或误差棒。

绘制有一组柱形的柱形图
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(5)
y1 = np.array([10, 8, 7, 11, 13])
# 柱形的宽度
bar_width = 0.3
# 绘制柱形图
plt.bar(x, y1, tick_label=['a', 'b', 'c', 'd', 'e'], width=bar_width)

输出为:
在这里插入图片描述

绘制有两组柱形的柱形图
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(5)
y1 = np.array([10, 8, 7, 11, 13])
y2 = np.array([9, 6, 5, 10, 12])
# 柱形的宽度
bar_width = 0.3
# 根据多组数据绘制柱形图
plt.bar(x, y1, tick_label=['a', 'b', 'c', 'd', 'e'], width=bar_width)
plt.bar(x + bar_width, y2, width=bar_width)
plt.show()

输出为:
在这里插入图片描述

绘制堆积柱形图

在使用bar()函数绘制图表时,可以通过给该函数的bottom参数传值的方式控制柱形的y值,使后绘制的柱形位于先绘制的柱形的上方。

# 绘制堆积柱形图
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(5)
y1 = np.array([10, 8, 7, 11, 13])
y2 = np.array([9, 6, 5, 10, 12])
# 柱形的宽度
bar_width = 0.3
plt.bar(x, y1, tick_label=['a', 'b', 'c', 'd', 'e'], width=bar_width)
plt.bar(x, y2, bottom=y1, width=bar_width)
plt.show()

输出为:
在这里插入图片描述

绘制有误差棒的柱形图

在使用bar()函数绘制图表时,还可以通过给xerr、yerr参数传值的方式为柱形添加误差棒。

import numpy as np
import matplotlib.pyplot as plt
x = np.arange(5)
y1 = np.array([10, 8, 7, 11, 13])
y2 = np.array([9, 6, 5, 10, 12])
# 柱形的宽度
bar_width = 0.3
# 偏差数据
error = [2, 1, 2.5, 2, 1.5]
# 绘制带有误差棒的柱形图
plt.bar(x, y1, tick_label=['a', 'b', 'c', 'd', 'e'], width=bar_width)
plt.bar(x, y1, bottom=y1, width=bar_width, yerr=error)
plt.show()

输出为:
在这里插入图片描述

实例2:2013-2019财年阿里巴巴淘宝和天猫平台的GMV
# 02_taobao_and_tianmao_GMV
import matplotlib.pyplot as plt
import numpy as np
x = np.arange(1, 8)
y = np.array([10770, 16780, 24440, 30920, 37670, 48200, 57270])
# 绘制柱形图
plt.bar(x, y, tick_label=["FY2013", "FY2014", "FY2015", "FY2016", "FY2017", "FY2018", "FY2019"], width=0.5)
plt.show()

输出为:

在这里插入图片描述

绘制条形图或堆积条形图

barh()函数

使用pyplot的barh()函数可以快速地绘制条形图或堆积条形图

barh(y, width, height=0.8, left=None, align='center', *, **kwargs) 

y:表示条形的y坐标值。
width:表示条形的宽度。对应轴
height:表示条形的高度,默认值为0.8。
left:条形左侧的x坐标值,默认值为0。
align:表示条形的对齐方式,默认值为“center”,即条形与刻度线居中对齐。
tick_label:表示条形对应的刻度标签。
xerr,yerr:若未设为None,则需要为条形图添加水平/垂直误差棒。

barh()函数会返回一个BarContainer类的对象

绘制有一组条形的条形图
import numpy as np
import matplotlib.pyplot as plt
y = np.arange(5)
x1 = np.array([10, 8, 7, 11, 13])
# 条形的高度
bar_height = 0.3
# 绘制条形图
plt.barh(y, x1, tick_label=['a', 'b', 'c', 'd', 'e'], height=bar_height)
plt.show()

输出为:
在这里插入图片描述

绘制有两组条形的条形图
import numpy as np
import matplotlib.pyplot as plt
y = np.arange(5)
x1 = np.array([10, 8, 7, 11, 13])
x2 = np.array([9, 6, 5, 10, 12])
# 条形的高度
bar_height = 0.3
# 根据多组数据绘制条形图
plt.barh(y, x1, tick_label=['a', 'b', 'c', 'd', 'e'], height=bar_height)
plt.barh(y+bar_height, x2, height=bar_height)
plt.show()

输出为:
在这里插入图片描述

绘制堆积条形图

在使用barh()函数绘制图表时,可以通过给left参数传值的方式控制条形的x值,使后绘制的条形位于先绘制的条形右方。

# 绘制堆积条形图
import numpy as np
import matplotlib.pyplot as plt
y = np.arange(5)
x1 = np.array([10, 8, 7, 11, 13])
x2 = np.array([9, 6, 5, 10, 12])
# 条形的高度
bar_height = 0.3
plt.barh(y, x1, tick_label=['a', 'b', 'c', 'd', 'e'], height=bar_height)
plt.barh(y, x2, left=x1, height=bar_height)
plt.show()

输出为:
在这里插入图片描述

绘制有误差棒的条形图

在使用barh()函数绘制图表时,可以通过给xerr、yerr参数传值的方式为条形添加误差棒。

import numpy as np
import matplotlib.pyplot as plt
y = np.arange(5)
x1 = np.array([10, 8, 7, 11, 13])
x2 = np.array([9, 6, 5, 10, 12])
# 偏差数据
error = [2, 1, 2.5, 2, 1.5]
# 绘制带有误差棒的条形图
plt.barh(y, x1, tick_label=['a', 'b', 'c', 'd', 'e'], height=bar_height)
plt.barh(y, x2, left=x1, height=bar_height, xerr=error)
plt.show()

输出为:
在这里插入图片描述

实例3:各商品种类的网购替代率
# 03_substitution_rate_online
import matplotlib.pyplot as plt
import numpy as np
# 显示中文
plt.rcParams['font.sans-serif'] = ['SimHei']
plt.rcParams['axes.unicode_minus'] = False
x = np.array([0.959, 0.951, 0.935, 0.924, 0.893, 0.892, 0.865, 0.863, 0.860, 0.856, 0.854, 0.835, 0.826, 0.816, 0.798, 0.765, 0.763, 0.67])
y = np.arange(1, 19)
labels = ["家政、家教、保姆等生活服务", "飞机票、火车票", "家具", "手机、手机配件", "计算机及其配套产品", "汽车用品", "通信充值、游戏充值", "个人护理用品", "书报杂志及音像制品", "餐饮、旅游、住宿", "家用电器", "食品、饮料、烟酒、保健品", "家庭日杂用品", "保险、演出票务", "服装、鞋帽、家用纺织品", "数码产品", "其他商品和服务", "工艺品、收藏品"]
# 绘制条形图
plt.barh(y, x, tick_label=labels, align="center", height=0.6)
plt.show()

输出为:
在这里插入图片描述

绘制堆积面积图

stackplot()函数

使用pyplot的stackplot()函数可以快速地绘制堆积面积图 。

stackplot(x, y,labels=(), baseline='zero', data=None, *args, **kwargs) 

x:表示x轴的数据,可以是一维数组。
y:表示y轴的数据,可以是二维数组或一维数组序列。
labels:表示每个填充区域的标签。
baseline:表示计算基线的方法,包括zero、sym、wiggle和weighted_wiggle。其中zero表示恒定零基线,即简单的叠加图;sym表示对称于零基线;wiggle表示最小化平方斜率之和;weighted_wiggle表示执行相同的操作,但权重用于说明每个填充区域的大小。

stackplot()函数会返回一个FillBetweenPolyCollection类的对象

绘制有三个填充区域的堆积面积图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
x = np.arange(6)
y1 = np.array([1,4,3,5,6,7])
y2 = np.array([1,3,4,2,7,6])
y3 = np.array([3,4,3,6,5,5])
# 绘制堆积面积图
plt.stackplot(x, y1, y2, y3)
#plt.show()

输出为:

在这里插入图片描述

实例4:物流公司物流费用统计

近些年我国物流行业蓬勃房展,目前已经有近几千家物流公司,其中部分物流公司大打价格战,以更低的价格吸引更多的客户,从而抢占市场份额。
在这里插入图片描述

# 04_logistics_cost_statistics
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(1, 13)
y_a = np.array([198, 215, 245, 222, 200, 236, 201, 253, 236, 200, 266, 290])
y_b = np.array([203, 236, 200, 236, 269, 216, 298, 333, 301, 349, 360, 368])
y_c = np.array([185, 205, 226, 199, 238, 200, 250, 209, 246, 219, 253, 288])
# 绘制堆积面积图
plt.stackplot(x, y_a, y_b, y_c)
plt.show()

输出为:
在这里插入图片描述

绘制直方图

hist()函数

使用pyplot的hist()函数可以快速地绘制直方图 。

hist(x, bins=None, range=None, density=None, weights=None, bottom=None,  **kwargs) 

x:表示传入的数据,可以是一个数组或包含多个数组的序列。
bins:表示矩形条的个数,默认值为10。
range:表示数据的范围,若未设置范围,默认数据范围为(x.min(), x.max())。
cumulative:表示是否计算累计频数或频率。
histtype:表示直方图的类型,支持’bar’、‘barstacked’、‘step’、‘stepfilled‘四种取值,其中’bar’为默认值,代表传统的直方图;‘barstacked’代表堆积直方图;‘step’代表未填充的线条直方图;‘stepfilled’代表填充的线条直方图。
align:表示矩形条边界的对齐方式,可设置为’left’、‘mid’或’right’,默认为’mid’。
orientation:表示矩形条的摆放方式,默认为’vertical’,即垂直方向。
rwidth:表示矩形条的相对宽度,默认值为None,表示自动计算宽度。若histtype的值为’step’或’stepfilled’,则直接忽略rwidth参数。
stacked:表示是否将多个矩形条堆叠摆放

hist()函数的返回值为Polygon类对象

绘制填充的线条直方图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
# 准备 50个随机测试数据
scores = np.random.randint(0, 100, 50)
# 绘制直方图
plt.hist(scores, bins=8, histtype='stepfilled')
#plt.show()

输出为:
在这里插入图片描述

实例5:人脸识别的灰度直方图

人脸识别技术是一种生物特征识别技术,它通过从装有摄像头的终端设备拍摄的人脸图像中抽取人的个性化特征,以此来识别人的身份。
在这里插入图片描述

# 05_face_recognition
import matplotlib.pyplot as plt
import numpy as np
# 10000 个随机数
random_state = np.random.RandomState(19680801)
random_x = random_state.randn(10000)
# 绘制包含 25个矩形条的直方图
plt.hist(random_x, bins=25)
plt.show()

输出为:
在这里插入图片描述

绘制饼图或圆环图

pie()函数

使用pyplot的pie()函数可以快速地绘制饼图或圆环图

pie(x, explode=None, labels=None, autopct=None, pctdistance=0.6, startangle=None, *, data=None) 

x:表示扇形或楔形对应的数据。
explode:表示扇形或楔形离开中心的距离
labels:表示每个扇形或楔形对应的标签文本。
autopct:表示控制扇形或楔形的数值显示的字符串,可通过格式字符串指定小数点后的位数
pctdistance:表示扇形或楔形对应的数值标签距离圆心的比例,默认为0.6。
shadow:表示是否显示阴影
labeldistance:表示标签文本的绘制位置(相对于半径的比例),默认为1.1。
startangle:表示起始绘制角度,默认从x轴的正方向逆时针绘制。
radius:表示扇形或楔形围成的圆形半径
wedgeprops:表示控制扇形或楔形属性的字典。例如,通过wedgeprops = {‘width’: 0.7} 将楔形的宽度设为0.7。
textprops:表示控制图表中文本属性的字典。
center:表示图表的中心点位置,默认为(0,0)。
frame:表示是否显示图框。

pie()函数返回值为Wedge

绘制饼图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
data = np.array([20, 50, 10, 15, 30, 55])
pie_labels = np.array(['A', 'B', 'C', 'D', 'E', 'F'])
# 绘制饼图:半径为 0.5,数值保留1位小数
plt.pie(data, radius=1.5, labels=pie_labels, autopct='%3.1f%%')
plt.show()

输出为:
在这里插入图片描述在这里插入图片描述

绘制圆环图
import numpy as np
import matplotlib.pyplot as plt
data = np.array([20, 50, 10, 15, 30, 55])
pie_labels = np.array(['A', 'B', 'C', 'D', 'E', 'F'])
# 绘制圆环图:外圆半径为1.5,楔形宽度为0.7
plt.pie(data, radius=1.5, wedgeprops={'width': 0.7}, labels=pie_labels,autopct='%3.1f%%', pctdistance=0.75)
plt.show()

输出为:
在这里插入图片描述

实例6:支付宝月账单报告

在这里插入图片描述

# 06_monthly_bills_of_alipay
import matplotlib.pyplot as plt
import matplotlib as mpl
mpl.rcParams['font.sans-serif'] = ['SimHei']
mpl.rcParams['axes.unicode_minus'] = False
# 饼图外侧的说明文字
kinds = ['购物', '人情往来', '餐饮美食', '通信物流', '生活日用', '交通出行', '休闲娱乐', '其他']
# 饼图的数据
money_scale = [800 / 3000, 100 / 3000, 1000 / 3000, 200 / 3000,300 / 3000, 200 / 3000, 200 / 3000, 200 / 3000]
dev_position = [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]
# 绘制饼图
plt.pie(money_scale, labels=kinds, autopct='%3.1f%%', shadow=True,explode=dev_position, startangle=90)
plt.show()

输出为:

在这里插入图片描述

绘制散点图或气泡图

scatter()函数

使用pyplot的scatter()函数可以快速地绘制散点图或气泡图 。

scatter(x, y, s=None, c=None, marker=None, cmap=None, linewidths=None, edgecolors=None, *, **kwargs) 

x,y:表示数据点的位置
s:表示数据点的大小
c:表示数据点的颜色。
marker:表示数据点的样式,默认值是 ‘o‘,表示圆形。
alpha:表示透明度,可以取值为0~1。
linewidths:表示数据点的描边宽度,默认值是1.5。
edgecolors:表示数据点的描边颜色,默认值是’face’ 。

scatter()函数返回PathCollection

绘制散点图

在这里插入图片描述

import matplotlib.pyplot as plt
import matplotlib as mpl
import numpy as np
mpl.rcParams['font.sans-serif'] = ['SimHei']
mpl.rcParams['axes.unicode_minus'] = False
num = 50
x = np.random.rand(num)
y = np.random.rand(num)
plt.scatter(x, y)

输出为:
在这里插入图片描述

绘制气泡图

在这里插入图片描述

import matplotlib.pyplot as plt
import matplotlib as mpl
import numpy as np
num = 50
x = np.random.rand(num)
y = np.random.rand(num)
area = (30 * np.random.rand(num)) **2
plt.scatter(x, y, s=area)

输出为:
在这里插入图片描述

实例7:汽车速度与制动距离的关系

在这里插入图片描述
在这里插入图片描述

# 07_vehicle_speed_and_braking_distance
import numpy as np
import matplotlib.pyplot as plt
plt.rcParams['font.sans-serif'] = 'SimHei'
plt.rcParams['axes.unicode_minus'] = False
# 准备 x 轴和 y 轴的数据
x_speed = np.arange(10, 210, 10)
y_distance = np.array([0.5, 2.0, 4.4, 7.9, 12.3, 17.7, 24.1, 31.5, 39.9, 49.2,59.5, 70.8, 83.1, 96.4, 110.7,126.0, 142.2, 159.4, 177.6, 196.8])
# 绘制散点图
plt.scatter(x_speed, y_distance, s=50, alpha=0.9)
plt.show()

输出为:
在这里插入图片描述

绘制箱形图

boxplot()函数

使用pyplot的boxplot()函数可以快速地绘制箱形图。

boxplot(x, notch=None, sym=None, vert=None, whis=None, positions=None, widths=None, *, data=None)

x:绘制箱形图的数据。
sym:表示异常值对应的符号,默认为空心圆圈。
vert:表示是否将箱体垂直摆放,默认值是True,表示垂直摆放。
whis:表示箱形图上下须与上下四分位的距离,默认为1.5倍的四分位差。
positions:表示箱体的位置。
widths:表示箱体的宽度,默认为0.5。
patch_artist:表示是否填充箱体的颜色,默认不填充。
meanline:是否用横跨箱体的线条标出平均数,默认不使用。
showcaps:表示是否显示箱体顶部和底部的横线,默认显示。
showbox:表示是否显示箱形图的箱体,默认显示。
showfliers:表示是否显示异常值,默认显示。
labels:表示箱形图的标签。
boxprops:表示控制箱体属性的字典。

绘制不显示异常值的箱形图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
data = np.random.randn(100)
# 绘制箱形图:显示中位数的线条、箱体宽度为0.3、填充箱体颜色、不显示异常值
plt.boxplot(data, meanline=True, widths=0.3, patch_artist=True,  showfliers=False)

输出为:
在这里插入图片描述

实例8:2017年和2018年全国发电量统计

在这里插入图片描述在这里插入图片描述

# 08_generation_capacity
import numpy as np
import matplotlib.pyplot as plt
plt.rcParams['font.family'] = 'SimHei'
plt.rcParams['axes.unicode_minus'] = False
data_2018 = np.array([5200, 5254.5, 5283.4, 5107.8, 5443.3, 5550.6, 6400.2, 6404.9, 5483.1, 5330.2, 5543, 6199.9])
data_2017 = np.array([4605.2, 4710.3, 5168.9, 4767.2, 4947, 5203, 6047.4, 5945.5, 5219.6, 5038.1, 5196.3, 5698.6])
# 绘制箱形图
plt.boxplot([data_2018, data_2017], tick_labels=('2018年', '2017年'),meanline=True, widths=0.5, vert=False, patch_artist=True)
plt.show()

输出为:
在这里插入图片描述

绘制雷达图

polar()函数

使用polar()绘制雷达图
在这里插入图片描述

polar(theta, r, **kwargs) 

theta:表示每个数据点所在射线与极径的夹角,单位是弧度
r:表示每个数据点到极点的距离。

thetagrids()函数

使用pyplot的thetagrids()函数可以设置极坐标轴的标签。

thetagrids(angles=None, labels=None, fmt=None, **kwargs)

angles :表示每个数据点所在射线与极径的夹角,单位是角度。
labels :表示每个极轴对应的标签。
角度转换为弧度公式:弧度 = 角度 ÷ 180 × π
弧度转换为角度公式:角度 = 弧度 × 180 ÷ π

案例一:绘制有3条连线的雷达图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
theta1 = np.array([0, np.pi/2, np.pi, 3*np.pi/2])       # 极角
r1 = np.array([6, 6, 6, 6])   # 极径
# 绘制雷达图
plt.polar(theta1, r1)

输出为:
在这里插入图片描述

案例二:绘制有一个菱形的雷达图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
# 极角
theta1 = np.array([0, np.pi/2, np.pi, 3*np.pi/2]) 
r1 = np.array([6, 6, 6, 6]) # 极径
# 拼接数组
r1 = np.concatenate((r1, [r1[0]]))
theta1 = np.concatenate((theta1, [theta1[0]]))
plt.polar(theta1, r1)

输出为:
在这里插入图片描述

案例三:绘制有标签的雷达图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
# 极角
theta1 = np.array([0, np.pi/2, np.pi, 3*np.pi/2]) 
print("theta1 ",theta1)
# theta1  [0.         1.57079633 3.14159265 4.71238898]
r1 = np.array([6, 6, 6, 6]) # 极径
# 拼接数组
r1 = np.concatenate((r1, [r1[0]]))
theta1 = np.concatenate((theta1, [theta1[0]]))
# 标签
radar_labels = np.array(['维度(A)', '维度(B)', '维度(C)', '维度(D)','维度(A)'])
plt.polar(theta1, r1)
plt.thetagrids(theta1 * 180/np.pi, labels=radar_labels)

输出为:
在这里插入图片描述

案例四:绘制有填充菱形的雷达图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
# 极角
theta1 = np.array([0, np.pi/2, np.pi, 3*np.pi/2]) 
print("theta1 ",theta1)
# theta1  [0.         1.57079633 3.14159265 4.71238898]
r1 = np.array([6, 6, 6, 6]) # 极径
# 拼接数组
r1 = np.concatenate((r1, [r1[0]]))
theta1 = np.concatenate((theta1, [theta1[0]]))
# 标签
radar_labels = np.array(['维度(A)', '维度(B)', '维度(C)', '维度(D)','维度(A)'])
plt.polar(theta1, r1)
plt.thetagrids(theta1 * 180/np.pi, labels=radar_labels)# 填充多边形
plt.fill(theta1, r1, alpha=0.3)

输出为:
在这里插入图片描述

实例9:霍兰德职业兴趣测试

在这里插入图片描述

在这里插入图片描述

# 09_holland_professional_interest_test
import numpy as np
import matplotlib.pyplot as plt
plt.rcParams['font.family'] = 'SimHei'
plt.rcParams['axes.unicode_minus'] = False
dim_num = 6
data = np.array([[0.40, 0.32, 0.35, 0.30, 0.30, 0.88],[0.85, 0.35, 0.30, 0.40, 0.40, 0.30],[0.43, 0.89, 0.30, 0.28, 0.22, 0.30],[0.30, 0.25, 0.48, 0.85, 0.45, 0.40],[0.20, 0.38, 0.87, 0.45, 0.32, 0.28],[0.34, 0.31, 0.38, 0.40, 0.92, 0.28]])
# 数据标准化 endpoint=False 不包括最后一个值
angles = np.linspace(0, 2 * np.pi, dim_num, endpoint=False)
# 闭合 [0.         1.04719755 2.0943951  3.14159265 4.1887902  5.23598776]
# print(angles)
angles = np.concatenate((angles, [angles[0]]))
# 闭合 列表的第一个元素等于最后一个元素
data = np.concatenate((data, [data[0]]))
# print("data \n",data)
# 维度标签
radar_labels = ['研究型(I)', '艺术型(A)', '社会型(S)', '企业型(E)', '传统型(C)', '现实型(R)']
# 闭合   ['研究型(I)' '艺术型(A)' '社会型(S)' '企业型(E)' '传统型(C)' '现实型(R)' '研究型(I)']
radar_labels = np.concatenate((radar_labels, [radar_labels[0]]))
# print(radar_labels)
# 绘制雷达图
plt.polar(angles, data)
# <matplotlib.lines.Line2D at 0x24b4fb7dcd0>
# 设置极坐标的标签
# print(angles * 180/np.pi) # [  0.  60. 120. 180. 240. 300.   0.]
plt.thetagrids(angles * 180/np.pi, labels=radar_labels)
# 填充多边形
plt.fill(angles, data, alpha=0.25) # 填充多边形
# <matplotlib.patches.Polygon at 0x24b510ca3c0>
# plt.show()

输出为:
在这里插入图片描述

误差棒图

errorbar()函数

使用pyplot的errorbar()函数可以快速地绘制误差棒图。

errorbar(x, y, yerr=None, xerr=None, fmt='', ecolor=None,  *, data=None, **kwargs) 

x,y:表示数据点的位置
xerr,yerr:表示数据的误差范围
fmt:表示数据点的标记样式和数据点之间连接线的样式。
elinewidth:表示误差棒的线条宽度
capsize:表示误差棒边界横杆的大小。
capthick:表示误差棒边界横杆的厚度。

errorbar()函数的返回值为ErrorbarContainer类

绘制误差棒图

在这里插入图片描述

import numpy as np
import matplotlib.pyplot as plt
x = np.arange(5)
y = (25, 32, 34, 20, 25)
y_offset = (3, 5, 2, 3, 3)
plt.errorbar(x, y, yerr=y_offset, capsize=3, capthick=2)
# plt.show()

输出为:
在这里插入图片描述

实例10:4个树种不同季节的细根生物量

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

# 10_fine_root_biomass
import numpy as np
import matplotlib.pyplot as plt
plt.rcParams['font.family'] = 'SimHei'
plt.rcParams['axes.unicode_minus'] = False
# 准备 x 轴和 y 轴的数据
x = np.arange(3)
y1 = np.array([2.04, 1.57, 1.63])
y2 = np.array([1.69, 1.61, 1.64])
y3 = np.array([4.65, 4.99, 4.94])
y4 = np.array([3.39, 2.33, 4.10])
# 指定测量偏差
error1 = [0.16, 0.08, 0.10]
error2 = [0.27, 0.14, 0.14]
error3 = [0.34, 0.32, 0.29]
error4 = [0.23, 0.23, 0.39]
bar_width = 0.2
# 绘制柱形图
plt.bar(x, y1, bar_width)
plt.bar(x + bar_width, y2, bar_width, align="center", tick_label=["春季", "夏季", "秋季"])
plt.bar(x + 2*bar_width, y3, bar_width)
plt.bar(x + 3*bar_width, y4, bar_width)
# 绘制误差棒 : 横杆大小为 3,  线条宽度为 3,  线条颜色为黑色, 数据点标记为像素点
plt.errorbar(x, y1, yerr=error1, capsize=3, elinewidth=2, fmt=' k,')
plt.errorbar(x + bar_width, y2, yerr=error2, capsize=3, elinewidth=2, fmt='k,')
plt.errorbar(x + 2*bar_width, y3, yerr=error3, capsize=3, elinewidth=2, fmt='k,')
plt.errorbar(x + 3*bar_width, y4, yerr=error4, capsize=3, elinewidth=2, fmt='k,')
plt.show()

输出为:
在这里插入图片描述

相关文章:

Python数据可视化-第2章-使用matplotlib绘制简单图表

环境 开发工具 VSCode库的版本 numpy1.26.4 matplotlib3.10.1 ipympl0.9.7教材 本书为《Python数据可视化》一书的配套内容&#xff0c;本章为第2章 使用matplotlib绘制简单图表 本文主要介绍了折线图、柱形图或堆积柱形图、条形图或堆积条形图、堆积面积图、直方图、饼图或…...

国产系统服务器识别不到SATA盘

在使用浪潮、海光、华三等系列服务器安装操作系统的时候提示没有足够的存储空间&#xff0c;其实是有两块512的SATA硬盘的&#xff0c;但是他没有识别到。 需要给硬盘做raid存储阵列才能让系统识别到他&#xff0c;下面是在BIOS中配置RAID的方法。 1、重启机器&#xff0c;按下…...

解决小程序video控件在真机和上线后黑屏不播放问题

小程序上线后&#xff0c;mp4格式的视频无法点击是黑屏&#xff0c;但是测试得时候在微信开发者工具中能够打开正常播放 原因&#xff1a;编码格式不能是vp9 微信开发者工具本地设置中把这个打开勾选。 排查&#xff1a;可以换一个视频尝试能不能真机播放&#xff0c;如果能&a…...

Vue3编译器深度解析:从模板编译到极致性能优化

一、编译技术架构演进 1.1 Vue2到Vue3编译架构升级 1.2 编译阶段性能基准对比 优化项Vue2编译耗时Vue3编译耗时性能提升模板解析速度12ms/千节点3ms/千节点75%AST遍历速度8ms/层级2ms/层级68%代码生成速度15ms/组件4ms/组件73%内存占用峰值84MB32MB62% 二、模板编译核心过程 …...

Google Gemini 2.0 网页抓取真丝滑

网页抓取从未如此简单——这一切都要归功于谷歌突破性的多模态实时API Gemini 2.0 借助这个工具&#xff0c;你可以毫不费力地从任何网页提取数据&#xff0c;无论页面结构多么复杂、内容多么杂乱无章&#xff0c;或是需要提取非常特定的信息。 今天&#xff0c;我将通过自己实…...

Leetcode-100 二分查找常见操作总结

二分查找常见操作总结 1. 基本二分查找 目标: 在有序数组 nums 中查找 target 的索引&#xff08;如果存在&#xff09;。 适用场景: 需要在 有序数组 中查找某个特定元素。适用于无重复元素的情况。 示例: 输入 nums [1, 2, 3, 4, 5], target 3&#xff0c;输出 2。 d…...

Android: Handler 的用法详解

Android 中 Handler 的用法详解 Handler 是 Android 中用于线程间通信的重要机制&#xff0c;主要用于在不同线程之间发送和处理消息。以下是 Handler 的全面用法指南&#xff1a; 一、Handler 的基本原理 Handler 基于消息队列(MessageQueue)和循环器(Looper)工作&#xff…...

第149场双周赛:找到字符串中合法的相邻数字、重新安排会议得到最多空余时间 Ⅰ、

Q1、找到字符串中合法的相邻数字 1、题目描述 给你一个只包含数字的字符串 s 。如果 s 中两个 相邻 的数字满足以下条件&#xff0c;我们称它们是 合法的 &#xff1a; 前面的数字 不等于 第二个数字。两个数字在 s 中出现的次数 恰好 分别等于这个数字本身。 请你从左到右…...

深入解析Translog机制:Elasticsearch的数据守护者

一、为什么需要Translog&#xff1f; Elasticsearch的数据写入流程是先写入内存缓冲区&#xff0c;然后定期刷新到磁盘生成Lucene分段。由于内存数据易失性&#xff0c;若在刷新前发生宕机&#xff0c;未持久化的数据将永久丢失。Translog的诞生正是为了解决这一数据可靠性问题…...

音视频入门基础:MPEG2-TS专题(25)——通过FFmpeg命令使用UDP发送TS流

音视频入门基础&#xff1a;MPEG2-TS专题系列文章&#xff1a; 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;1&#xff09;——MPEG2-TS官方文档下载 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;2&#xff09;——使用FFmpeg命令生成ts文件 音视频入门基础…...

3、nFR52xx蓝牙学习(点亮第一个LED灯)

一、点灯代码&#xff1a; led.h文件 #ifndef __LED_H #define __LED_H#include "nrf52840.h"#define LED_0 NRF_GPIO_PIN_MAP(0,13) #define LED_1 NRF_GPIO_PIN_MAP(0,14) #define LED_2 NRF_GPIO_PIN_MAP(0,15) #define LED_3 …...

符号秩检验

内容来源 非参数统计&#xff08;第2版&#xff09; 清华大学出版社 王星 褚挺进 编著 符号秩检验 在符号检验的基础上&#xff0c;增加了数据绝对值大小的信息 检验统计量 用一个简单的例子来说明 样本数据 X i , i 1 , ⋯ , 6 X_i,i1,\cdots,6 Xi​,i1,⋯,6 如下 X …...

制造业数字化转型:流程改造先行还是系统固化数据?基于以MTO和MTS的投资回报分析

1. 执行摘要 制造业正经历一场深刻的数字化转型&#xff0c;企业面临着先进行流程改造以优化运营&#xff0c;还是直接上线系统以固化数据的战略选择。本文深入分析了以销定产&#xff08;MTO&#xff09;和以产定销&#xff08;MTS&#xff09;两种主要生产模式下&#xff0c…...

python相关笔记

一。 is和的区别 1.is看的是发票逻辑地址&#xff0c;用来判断两个变量是否引用同一个对象&#xff0c;is关注的是‘身份’ 2.判断两个对象是否具有相同的值&#xff0c;关注的是内容是否相等&#xff0c;也即值是否相等。 3. if x is None: print(x is None")...

C++(匿名函数+继承+多态)

#include <iostream> #include <cstring> #include <cstdlib> #include <unistd.h> #include <sstream> #include <vector> #include <memory>using namespace std;// 基类 Weapon class Weapon { protected:int atk; public:Weapon…...

界面架构 - MVVM (Qt)

MVVM MVVM 的主要特点示例示例功能示例代码ViewModel 类&#xff08;C&#xff09;主函数入口&#xff08;main.cpp&#xff09; QML 文件&#xff08;main.qml&#xff09;总结 MVVM&#xff08;Model-View-ViewModel&#xff09;架构是一种旨在进一步分离界面和业务逻辑的设计…...

在未归一化的线性回归模型中,特征的尺度差异可能导致模型对特征重要性的误判

通过数学公式来更清晰地说明归一化对模型的影响&#xff0c;以及它如何改变特征的重要性评估。 1. 未归一化的情况 假设我们有一个线性回归模型&#xff1a; y β 0 β 1 x 1 β 2 x 2 ϵ y \beta_0 \beta_1 x_1 \beta_2 x_2 \epsilon yβ0​β1​x1​β2​x2​ϵ 其…...

【大模型系列篇】大模型基建工程:使用 FastAPI 构建 MCP 服务器

今天我们将使用FastAPI来构建 MCP 服务器&#xff0c;Anthropic 推出的这个MCP 协议&#xff0c;目的是让 AI 代理和你的应用程序之间的对话变得更顺畅、更清晰。FastAPI 基于 Starlette 和 Uvicorn&#xff0c;采用异步编程模型&#xff0c;可轻松处理高并发请求&#xff0c;尤…...

基于微信小程序的智慧乡村旅游服务平台【附源码】

基于微信小程序的智慧乡村旅游服务平台&#xff08;源码L文说明文档&#xff09; 目录 4系统设计 4.1系统功能设计 4.2系统结构 4.3.数据库设计 4.3.1数据库实体 4.3.2数据库设计表 5系统详细实现 5.1 管理员模块的实现 5.1.1旅游景点管理…...

llm-universe 踩坑记录

踩坑 云服务器2G不够&#xff0c;因为后面用到内存向量数据库&#xff0c;把数据加载到内存&#xff0c;一个大点的pdf就导致整个服务器崩了。当时可以选择不加载大的文件&#xff0c;自己替换一个小点的pdf 注意点 LLM API.ipynb 这节要注意看下API的含义&#xff0c;了解m…...

【案例】跨境电商企业实践云成本优化,选对平台是关键

某跨境电商企业近年因业务发展迅猛&#xff0c;近年来在全球市场大力拓展业务。然而&#xff0c;伴随其全球化布局的深化&#xff0c;云资源成本逐年攀升&#xff0c;每年在云资源方面的投入超 500万元。庞大的云资源使用量虽支撑了业务的快速发展&#xff0c;但也带来了较高的…...

系统思考与时间管理

时间管理的真正秘诀&#xff1a;主动浪费时间&#xff1f; 巴菲特的私人飞机驾驶员觉得自己不够成功&#xff0c;于是向巴菲特请教应该怎么做。巴菲特让他列出了自己人生中最想实现的25个目标&#xff0c;并按重要程度排序&#xff0c;接着安排时间专注做前五件最重要的事情。…...

洛谷.P1563 [NOIP 2016 提高组] 玩具谜题

P1563 [NOIP 2016 提高组] 玩具谜题 - 洛谷 代码区&#xff1a; #include<algorithm> #include<iostream> #include<cstring> #include<string> #include<vector>using namespace std; const int MAX 1000005; struct PEOPLE {int cx;//0朝内…...

华为面试,机器学习深度学习知识点:

机器学习深度学习知识点&#xff1a; 机器学习一般有哪些分数&#xff0c;对于不同的任务&#xff1a; 分类任务&#xff1a; 准确率&#xff08;Accuracy&#xff09;&#xff1a;预测正确的样本数占总样本数的比例&#xff0c;公式为 Accuracy TPTNFPFN TPTN ​ &#xff0c…...

关于 数据库 UNION 和 UNION ALL 的使用,以及 分库分表环境下多表数据组合后的排序和分页问题的解决方案 的详细说明,并以表格总结关键内容

以下是关于 数据库 UNION 和 UNION ALL 的使用&#xff0c;以及 分库分表环境下多表数据组合后的排序和分页问题的解决方案 的详细说明&#xff0c;并以表格总结关键内容&#xff1a; 1. UNION 和 UNION ALL 的核心区别 1.1 定义与语法 UNION 功能&#xff1a;合并两个或多个 …...

架构设计基础系列:事件溯源模式浅析

图片来源网络&#xff0c;侵权删 ‌1. 引言‌ ‌1.1 研究背景‌ 传统CRUD模型的局限性&#xff1a;状态覆盖导致审计困难、无法追溯历史。分布式系统复杂性的提升&#xff1a;微服务架构下数据一致性、回滚与调试的需求激增。监管合规性要求&#xff1a;金融、医疗等领域对数…...

虚拟试衣间-云尚衣橱小程序-衣橱管理实现

衣橱管理实现 目标 (Goal): 用户 (User): 能通过 UniApp 小程序上传衣服图片。 后端 (Backend): 接收图片,存到云存储,并将图片信息(URL、用户ID等)存入数据库。 用户 (User): 能在小程序里看到自己上传的所有衣服图片列表。 技术栈细化 (Refined Tech Stack for this Pha…...

蓝桥杯省模赛 台阶方案

问题描述 小蓝要上一个楼梯&#xff0c;楼梯共有 n 级台阶&#xff08;即小蓝总共要走 n 级&#xff09;。小蓝每一步可以走 a 级、b 级或 c 级台阶。 请问小蓝总共有多少种方案能正好走到楼梯顶端&#xff1f; 输入格式 输入的第一行包含一个整数 n 。 第二行包含三个整数…...

Socket编程UDP

Socket编程UDP 1、V1版本——EchoServer2、网络命令2.1、ping2.2、netstat2.3、pidof 3、验证UDP——Windows作为client访问Linux4、V2版本——DictServer5、V3版本——简单聊天室 1、V1版本——EchoServer 首先给出EchoServer目录结构&#xff1a;服务器的类我们实现在UdpServ…...

无人机机体结构设计要点与难点!

一、无人机机体结构设计要点 1. 类型与应用场景匹配 固定翼无人机&#xff1a;需优化机翼升阻比&#xff0c;采用流线型机身降低气动阻力&#xff08;如大展弦比机翼设计&#xff09;。 多旋翼无人机&#xff1a;注重轻量化框架和对称布局&#xff08;如四轴/六轴碳纤维机…...

音视频(一)ZLMediaKit搭建部署

前言 一个基于C11的高性能运营级流媒体服务框架 全协议支持H264/H265/AAC/G711/OPUS/MP3&#xff0c;部分支持VP8/VP9/AV1/JPEG/MP3/H266/ADPCM/SVAC/G722/G723/G729 1&#xff1a;环境 ubuntu22.* ZLMediaKit downlaod:https://github.com/ZLMediaKit/ZLMediaKit or https://g…...

实战 | 餐厅点餐小程序技术解析:SpringBoot + UniApp 高效开发指南

&#x1f5a5;️ 一、系统架构概览 1.1 技术选型 为了确保开发效率和系统稳定性&#xff0c;我们采用以下技术栈&#xff1a; 模块技术选型后台服务SpringBoot MyBatis-Plus MySQL用户端&#xff08;点餐小程序&#xff09;UniApp&#xff08;Vue 语法&#xff09;师傅端&…...

合并相同 patient_id 的 JSON 数据为数组

问题 select patient_id,concat({"itemText":",item_text,","itemValue":",item_value,"}) from hs_patient_groups where active 1;eef41128c47c401abb7f8885a5f9fbdf {"itemText":"旧","itemValue"…...

AI安全:构建负责任且可靠的系统

AI已成为日常生活中无处不在的助力&#xff0c;随着AI系统能力和普及性的扩展&#xff0c;安全因素变得愈发重要。从基础模型构建者到采用AI解决方案的企业&#xff0c;整个AI生命周期中的所有相关方都必须共同承担责任。 为什么AI安全至关重要&#xff1f; 对于企业而言&…...

STM32单片机入门学习——第8节: [3-4] 按键控制LED光敏传感器控制蜂鸣器

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.02 STM32开发板学习——第8节: [3-4] 按键控制LED&光敏传感器控制蜂鸣器 前言开…...

Linux驱动入门——设备树详解

文章目录 一、设备树的引入与作用二、设备树的语法1. Devicetree格式1.1 DTS文件的格式1.2 node的格式1.3 properties的格式 2. dts文件包含dtsi文件3. 常用的属性3.1 #address-cells、#size-cells3.2 compatible3.3 model3.4 status3.5 reg 4. 常用的节点(node)4.1 根节点4.2 …...

Scala集合

Scala集合分为序列Seq、集Set、映射Map&#xff0c;都扩展自Iterable特质&#xff0c;且有可变和不可变版本。不可变集合操作后会返回新对象&#xff0c;可变集合则直接修改原对象。比如数组&#xff0c;不可变数组定义后大小不可变&#xff0c;修改会生成新数组&#xff1b;可…...

阿里云AI Studio 2.0:拖拽搭建企业级智能客服系统

一、平台能力全景 1.1 核心功能矩阵 模块子功能技术指标对话设计可视化流程编排支持50节点类型NLP引擎意图识别准确率行业TOP3&#xff08;92.6%&#xff09;知识管理多源数据接入15格式支持渠道对接全渠道覆盖8大平台SDK 1.2 企业级特性 关键优势&#xff1a; 日均对话承…...

java虚拟机---JVM

JVM JVM&#xff0c;也就是 Java 虚拟机&#xff0c;它最主要的作用就是对编译后的 Java 字节码文件逐行解释&#xff0c;翻译成机器码指令&#xff0c;并交给对应的操作系统去执行。 JVM 的其他特性有&#xff1a; JVM 可以自动管理内存&#xff0c;通过垃圾回收器回收不再…...

您的LarkXR专属顾问上线了!平行云官网新增 AI 小助手,手册同步升级!

遇到LarkXR技术问题&#xff1f;还在手动翻文档&#xff1f; Paraverse平行云官网双升级——AI小助手实时答疑 用户手册智能检索&#xff01; 助您快速定位解决方案&#xff0c;效率全面提升&#xff01; < 01 > AI 小助手—— 您的 LarkXR 智能顾问 欢迎我们的新成员…...

推导Bias² + Variance + σ²_ε

问题的背景 我们有一个真实函数 f ( x ) f(x) f(x) 和基于训练数据 D D D 训练得到的模型 f ^ ( x ; D ) \hat{f}(x;D) f^​(x;D)。对于任意输入 x x x&#xff1a; y y y 是真实的观测值&#xff0c;定义为 y f ( x ) ϵ y f(x) \epsilon yf(x)ϵ&#xff0c;其中 …...

javaSE知识梳理(一)

一.面向对象编程 1.面向对象的基本元素&#xff1a;类(class)和对象 ①类的声明 语法格式&#xff1a; [修饰符] class 类名{属性声明;方法声明; } ②对象的创建(new) 语法格式&#xff1a; //方式1&#xff1a;给创建有名对象 类名 对象名 new 类名();//方式2&#xff1…...

k8s statefulset pod重启顺序

在 Kubernetes 中&#xff0c;StatefulSet 的 Pod 重启顺序由以下规则和机制决定&#xff1a; 1. StatefulSet 的核心设计原则 StatefulSet 旨在管理有状态应用&#xff0c;其核心特性包括&#xff1a; 稳定的唯一标识&#xff1a;Pod 名称格式为 <statefulset-name>-&…...

记录学习的第十九天

现在这篇是记录一下4.1的学习。今天还没开始。 这篇是关于简单的动态规划的题目&#xff0c;思路比较清晰类似。 在这里先说一下有关动态规划的四个步骤&#xff1a; 1.确定子问题 2.确定dp数组的递推关系(dp数组也叫子问题数组) 3.确定求解的计算顺序 4.空间优化(初学者可…...

【实用技巧】电脑重装后的Office下载和设置

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言下载设置总结互动致谢参考目录导航 前言 在数字化办公时代&#xff0c;Windows和…...

模拟集成电路设计与仿真 : Mismatch

前情提要 此為作者針對 mismatch ,進行資料統整,以便日後查詢原理 1. Mismatch (失配) random offset 靜態消除 : trimming動態消除 : auto zero ,choppingCMRRlinearity 理想差動對只有奇次諧波,沒有偶次諧波,但 mismatch 會引入殘存的偶次諧波PSRR2. Input Offset Volt…...

深度学习查漏补缺:4.数据分布的度量

一、数据分布差异的度量 1.KL散度&#xff08;Kullback-Leibler Divergence&#xff09; 什么是KL散度&#xff1f; KL散度是一种用来衡量两个概率分布之间差异的工具。你可以把它想象成一个“距离测量器”&#xff0c;但它不是传统意义上的距离&#xff08;比如两点之…...

银河麒麟V10 aarch64架构安装mysql教程

国产操作系统 ky10.aarch64 因为是arm架构&#xff0c;故选择mysql8&#xff0c;推荐安装8.0.28版本 尝试8.0.30和8.0.41版本均未成功&#xff0c;原因不明☹️ 1. 准备工作 ⏬ 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 2. 清理历史环境 不用管…...

【NLP 52、多模态相关知识】

生活应该是美好而温柔的&#xff0c;你也是 —— 25.4.1 一、模态 modalities 常见&#xff1a; 文本、图像、音频、视频、表格数据等 罕见&#xff1a; 3D模型、图数据、气味、神经信号等 二、多模态 1、Input and output are of different modalities (eg&#xff1a; tex…...

[NCTF2019]Fake XML cookbook [XXE注入]

题目源代码 function doLogin(){var username $("#username").val();var password $("#password").val();if(username "" || password ""){alert("Please enter the username and password!");return;}var data "…...