Matplotlib教程:在绝对坐标绘图中使用自定义相对轴刻度标签

Matplotlib教程:在绝对坐标绘图中使用自定义相对轴刻度标签

本教程旨在解决matplotlib中一个常见的绘图需求:当数据点基于绝对物理坐标(如毫米)绘制时,如何将轴刻度标签替换为更具业务意义的相对标识符(如网格的列/行号)。我们将详细介绍如何利用ax.set_xticks()、ax.set_yticks()、ax.set_xticklabels()和ax.set_yticklabels()函数,在不改变数据点实际位置的前提下,实现轴刻度位置与标签内容的分离,从而提高图表的专业性和可读性。

引言:坐标与标签的灵活需求

在许多工程和制造领域,数据通常以精确的绝对物理坐标(例如,部件上的X、Y毫米位置)进行测量和记录。然而,在进行可视化时,直接显示这些绝对坐标作为轴刻度可能并不直观。用户,特别是现场操作人员,可能更习惯于使用相对的、逻辑性的标识符来定位,例如“第1列,第2行”。

Matplotlib默认的轴刻度行为是将数据点的坐标直接用作刻度位置和标签。这在大多数情况下是合理的,但当我们需要将绝对位置与相对标识符结合时,就需要更精细的控制。本教程将展示如何通过Matplotlib的轴对象方法,实现绘图数据的绝对定位与轴刻度标签的相对自定义,从而创建既精确又易于理解的图表。

核心概念:分离刻度位置与标签内容

Matplotlib通过Axes对象提供了一系列强大的方法来控制轴的各个方面。要实现绝对坐标绘图与相对刻度标签的结合,我们主要依赖以下四个关键函数:

ax.set_xticks(locs) / ax.set_yticks(locs):

这两个函数用于设置轴上刻度线的位置。locs是一个数值列表,指定了刻度线在数据坐标系中的具体位置。例如,ax.set_xticks([-160.1, -110.1]) 将会在X轴的-160.1和-110.1位置绘制刻度线。这些位置是基于您实际绘图所使用的绝对数据坐标。

ax.set_xticklabels(labels) / ax.set_yticklabels(labels):

这两个函数用于设置对应刻度线的文本标签。labels是一个字符串列表,其中的每个字符串将作为对应位置刻度线的标签。重要的是,labels列表的长度和顺序必须与locs列表(即通过set_xticks/set_yticks设置的刻度位置)严格匹配。例如,如果您在X轴设置了两个刻度位置,那么set_xticklabels也需要提供两个标签。

通过这种方式,我们首先告诉Matplotlib“在哪里”放置刻度线(使用绝对坐标),然后告诉它“显示什么”作为这些刻度线的标签(使用相对标识符)。

实现步骤

我们将通过一个具体的例子来演示如何实现这一功能。假设我们有一个包含部件引脚信息的数据集,其中包含引脚的唯一ID、绝对X/Y坐标以及相对的列/行号。

1. 数据准备

首先,我们需要准备数据。在这个例子中,数据被组织成一个Pandas DataFrame,包含了引脚ID、绝对X/Y坐标以及对应的相对列/行号。

import pandas as pdfrom matplotlib import pyplot as plt# 模拟数据ID =  ['C1;R2', 'C2;R2', 'C1;R1', 'C2;R1'] # 引脚标识符X = [-160.1, -110.1, -160.1, -110.1]     # 绝对X坐标 (毫米)Y = [974.9, 974.9, 924.9, 924.9]         # 绝对Y坐标 (毫米)COLUMN = ['1', '2', '1', '2']            # 相对列号ROW = ['2', '2', '1', '1']               # 相对行号# 合并列表并创建DataFramelist_of_tuples = list(zip(ID, X, Y, COLUMN, ROW))Data = pd.DataFrame(list_of_tuples, columns=['ID', 'X', 'Y', 'COLUMN', 'ROW'])print("DataFrame内容:")print(Data)

DataFrame内容如下:

      ID      X      Y COLUMN ROW0  C1;R2 -160.1  974.9      1   21  C2;R2 -110.1  974.9      2   22  C1;R1 -160.1  924.9      1   13  C2;R1 -110.1  924.9      2   1

2. 初始绘图

使用绝对X和Y坐标绘制散点图。

fig, ax = plt.subplots()ax.scatter(Data['X'], Data['Y'])# 标注点IDData[['X','Y','ID']].apply(lambda row: ax.text(row['X'], row['Y'], row['ID'], ha='center', va='bottom'), axis=1)# 设置图表标题ax.set_title("参考图", size=18)

此时,X轴和Y轴的刻度将显示为绝对的X和Y坐标值。

3. 自定义轴刻度位置与标签

这是实现核心功能的步骤。我们将根据数据中的绝对坐标和对应的相对列/行号来设置刻度。

确定刻度位置 (绝对坐标):从数据中可以看到,X轴的刻度应该位于 -160.1 和 -110.1。Y轴的刻度应该位于 924.9 和 974.9。确定刻度标签 (相对标识符):对于X轴,对应的相对列号是 1 和 2。对于Y轴,对应的相对行号是 1 和 2。

将这些信息应用到 set_xticks/set_yticks 和 set_xticklabels/set_yticklabels。同时,为了图表的整体一致性,我们将轴的标签也更新为“COLUMN”和“ROW”。

# 定义自定义刻度位置 (使用绝对坐标)ax.set_xticks([-160.1, -110.1]) # X轴刻度位于这些绝对X坐标ax.set_yticks([924.9, 974.9])   # Y轴刻度位于这些绝对Y坐标# 创建自定义轴刻度标签 (使用相对标识符)xlabels = ['1', '2'] # X轴刻度标签为相对列号ylabels = ['1', '2'] # Y轴刻度标签为相对行号# 将新标签应用到自定义刻度位置ax.set_xticklabels(xlabels)ax.set_yticklabels(ylabels)# 更新轴标签以反映新的含义plt.xlabel('COLUMN')plt.ylabel('ROW')

4. 完整示例代码

结合以上所有步骤,完整的代码如下:

import pandas as pdfrom matplotlib import pyplot as plt# Setup ListsID =  ['C1;R2', 'C2;R2', 'C1;R1', 'C2;R1'] # Pin identifierX = [-160.1, -110.1, -160.1, -110.1]     # Absolute X positions (mm)Y = [974.9, 974.9, 924.9, 924.9]         # Absolute Y positions (mm)COLUMN = ['1', '2', '1', '2']            # Relative X (Column)ROW = ['2', '2', '1', '1']               # Relative Y (Row)# Merge Listslist_of_tuples = list(zip(ID, X, Y, COLUMN, ROW))# Convert lists to dataframeData = pd.DataFrame(list_of_tuples,                  columns=['ID', 'X', 'Y', 'COLUMN', 'ROW'])# Plot pointsfig, ax = plt.subplots()ax.scatter(Data['X'], Data['Y'])# Label Axis (updated to reflect relative meanings)plt.xlabel('COLUMN')plt.ylabel('ROW')# Set Titleax.set_title("Reference Plot", size=18)# Label Points with IDsData[['X','Y','ID']].apply(lambda row: ax.text(row['X'], row['Y'], row['ID'], ha='center', va='bottom'),axis=1)# Define custom tick locations (using absolute coordinates)ax.set_xticks([-160.1, -110.1]) # X ticks at these blueprint coordinatesax.set_yticks([924.9, 974.9])   # Y ticks at these blueprint coordinates# Create custom axis tick labels (using relative identifiers)xlabels = ['1', '2'] # Give x-ticks relative column number namesylabels = ['1', '2'] # Give y-ticks relative row number names# Apply new labels to custom tick locationsax.set_xticklabels(xlabels)ax.set_yticklabels(ylabels)# Display the plotplt.show()

运行这段代码后,您将看到一个散点图,其中数据点仍然精确地位于其绝对X/Y坐标上,但X轴和Y轴的刻度标签分别显示为“1”、“2”,代表列和行,极大地提升了图表的业务可读性。

注意事项与最佳实践

刻度位置与标签的对应关系: 务必确保 set_xticks/set_yticks 中提供的刻度位置数量与 set_xticklabels/set_yticklabels 中提供的标签数量一致,并且顺序要一一对应。如果数量不匹配,Matplotlib会报错或产生非预期的结果。

动态生成刻度: 在实际应用中,如果部件的引脚数量或布局是可变的,不应硬编码刻度位置和标签。您可以从DataFrame中动态提取唯一的X/Y坐标作为刻度位置,并提取对应的唯一列/行号作为标签。

例如,要动态获取X轴的刻度位置和标签:

unique_x_coords = Data['X'].unique()unique_columns = Data['COLUMN'].unique()# 确保排序一致,以便标签与位置正确对应sorted_indices_x = unique_x_coords.argsort()sorted_x_coords = unique_x_coords[sorted_indices_x]sorted_x_labels = unique_columns[sorted_indices_x]ax.set_xticks(sorted_x_coords)ax.set_xticklabels(sorted_x_labels)

对Y轴执行类似操作。

轴标签的更新: 当刻度标签代表的含义发生变化时,不要忘记更新 plt.xlabel() 和 plt.ylabel(),使其与新的刻度标签含义保持一致,避免混淆。

可读性与用户体验: 这种方法特别适用于需要将精确技术数据转化为用户友好界面的场景。通过将原始的、可能难以理解的坐标转换为业务逻辑标识符,可以显著提升图表的可读性和实用性。

总结

Matplotlib通过其灵活的API,允许开发者对图表的每一个细节进行精细控制。ax.set_xticks()、ax.set_yticks()、ax.set_xticklabels()和ax.set_yticklabels()的组合使用,提供了一种强大的机制,使得我们能够在绘图数据使用绝对坐标的同时,为轴刻度提供自定义的、更具业务意义的相对标签。掌握这一技巧,将使您能够创建出既专业又易于理解的复杂数据可视化图表。

以上就是Matplotlib教程:在绝对坐标绘图中使用自定义相对轴刻度标签的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1377471.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月14日 17:48:27
下一篇 2025年12月14日 17:48:36

相关推荐

  • 绝对定位元素在不同分辨率下偏移,如何解决?

    盒子里的绝对定位元素偏移问题及解决方法 在自定义的输入框checkbox中,对于不同的分辨率设置的居中样式会发生意外的像素偏移,影响选中状态下小红点的居中效果。 偏移的原因在于使用像素单位px。不同分辨率下,像素点的显示方式不同,导致视觉上的错位。 解决方法是将像素单位替换为相对单位,如rem或em…

    2025年12月24日
    400
  • 自定义 input checkbox 样式在不同分辨率下居中效果不佳怎么办?

    盒子内的绝对定位元素因分辨率不同而发生偏差问题的解决 针对自定义 input checkbox 样式在不同分辨率下居中效果不佳的问题,以下是解决方法: 在 css 代码中,像素单位会导致不同分辨率下像素点移位。因此,将 px 单位替换为相对单位即可解决此问题。 修改后的 css 代码如下: .cla…

    2025年12月24日
    000
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 如何用 CSS 设置背景图片透明度?

    css 背景图片透明度设置困境 如何在 css 中有效调整背景图片的透明度,困扰了众多开发者。 无效的 rgba() 方法 许多开发者尝试使用 background-color: rgba() 方法,但发现无法生效。这是因为该方法适用于背景颜色,而背景图片则需要使用不同的方法。 立即学习“前端免费学…

    2025年12月24日
    000
  • JavaScript 修改 div id 属性时样式不生效的原因是什么,如何解决?

    javascript 修改 div id 属性时样式不生效的问题 在使用 javascript 修改 div 的 id 属性时,虽然 id 确实被改变了,但样式却可能没有相应改变。造成这种情况的原因是,绝对定位的元素在 id 改变后,其位置也会发生变化。 解决方法: 由于 id 改变会影响元素的位置…

    2025年12月24日
    000
  • 前端进度条如何实现圆环效果和鼠标悬停提示?

    如何实现前端进度条 对于如何实现前端进度条,设计稿明确要求包含中间的圆环效果和鼠标悬停提示信息。针对这一需求,开发者提出了多种思路: 思路 1:修改 Element-UI Progress 这种方法虽然可行,但存在自定义样式困难的问题,难以满足需要在进度条中间添加圆环的需求。 立即学习“前端免费学习…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000
  • 如何使用 CSS 创建带有圆角和斜边的卡片样式以及圆角标签?

    卡片样式 css 难题解决 您正在寻找一种方法来实现复杂的卡片样式,其中包括一个带有圆角和斜边的不规则形状以及一个圆角标签。以下是一种使用 css 的有效解决方案: 解决方案: 使用 clip-path 的路径路径可以实现这种不规则形状。路径命令与 svg 路径命令相同。 立即学习“前端免费学习笔记…

    2025年12月24日
    000
  • 移动端子元素高度低于父元素,如何实现水平滚动?

    移动端子元素高度低于父元素且无法水平滚动 在移动端开发中,时常会遇到子元素高度低于父元素且无法水平滚动的困扰。如何解决这一问题,实现子元素在父元素内任意滑动的效果呢? 解决方案 以下为可行的解决方案: 使用绝对定位 (absolute):将子元素设置为绝对定位,并赋予其父元素一个相对位置 (rela…

    2025年12月24日
    300
  • 如何实现三角形进度条的动态渐变和箭头定位?

    如何在三角形进度条中实现动态渐变和箭头定位? 根据题主描述,三角形进度条需要根据百分比实现动态渐变,同时在进度条上方添加一个箭头指示器。 进度条渐变效果 要实现进度条的渐变效果,可以使用css的 linear-gradient 属性。具体实现方式如下: mask-image: linear-grad…

    2025年12月24日
    300
  • 如何避免子元素撑高父元素?

    如何避免子元素撑高父元素? 在网页布局中,如何控制子元素对父元素高度的影响是一个常见问题。为了使父元素仅由文字内容撑高,而不是被图片等子元素撑高,我们可以考虑以下纯 css 解决方法: 绝对定位: 将图片子元素设置为绝对定位(position: absolute),使其脱离文档流,就不会对父元素的高…

    2025年12月24日
    000
  • 如何使用 JS 实现渐进式进度条和三角形图片的渐进变化?

    使用 js 实现渐进式进度条效果 原进度条设计中,渐变方向错误,需要将其改为从左到右渐变。本文将使用 js 修改渐变效果,实现从左到右渐进的效果。 三角形图片的渐进式变化 除了进度条的渐变外,题主还希望让三角形上的图片也实现渐进式变化。根据题主补充的描述,可以使用 js 修改进度条的 -webkit…

    2025年12月24日
    000
  • 三角形进度条渐变区域的动态变化如何实现?

    渐变占比在三角形进度条中的实现 对于三角形进度条中渐变区域的动态变化需求,可以通过以下方式实现: 渐变条形 使用 js 动态修改 -webkit-mask-image: linear-gradient(to right, #000000 0%, transparent); 中的 transparen…

    2025年12月24日
    000
  • 如何实现三角形内渐变条的动态调整和方向翻转?

    三角形内渐变条占比如何实现? 在给定的图片中,需要根据百分比来动态调整三角形中的渐变条,并将其左右方向翻转。 解决方案: 三角形内渐变条 使用 javascript 设置 -webkit-mask-image 的 transparent 值,即可实现根据进度修改渐变条的长度: mask-image:…

    2025年12月24日
    000
  • 移动端嵌套 DIV 中子 DIV 如何水平滑动?

    移动端嵌套 DIV 中子 DIV 滑动 在移动端开发中,遇到这样的问题:当子 DIV 的高度小于父 DIV 时,无法在父 DIV 中水平滚动子 DIV。 无限画布 要实现子 DIV 在父 DIV 中任意滑动,需要创建一个无限画布。使用滚动无法达到负值,因此需要使用其他方法。 相对定位 一种方法是将子…

    2025年12月24日
    000
  • 为什么“::after”伪元素背景设置不完全生效?

    出现“::after”伪元素背景设置不完全生效的原因就在于将该伪元素设置为绝对定位(position: absolute)。 在设置了绝对定位之后,如果没有指定定位信息,伪元素就会出现在元素原来的位置,并且移出文档流之外。因此,选中“::after”伪类后,浏览器高亮的元素部分会超出“li”元素的可…

    2025年12月24日
    000
  • 为什么 `::after` 伪元素的背景色没有完全生效?

    这里的 ::after 伪元素设置背景不完全生效? 问题: 查看 codepen 实际效果:https://codepen.io/clarence-sampson/pen/poqmjvb 在以下代码中,::after 伪元素设置背景无效: nav li::after { content: “”; p…

    2025年12月24日
    000
  • ::after 伪元素背景不完全生效,怎么解决?

    这里的 ::after 伪元素设置背景不完全生效,原因和解决方法 本文将讨论在使用 ::after 伪元素设置背景时遇到的背景不完全生效的问题,并提供解决方案。 问题 一个开发者在使用 ::after 伪元素设置背景时遇到了一个问题,即背景没有完全生效。具体表现为: 背景颜色仅部分显示,并未覆盖整个…

    2025年12月24日
    000
  • 为什么在设置了 absolute 定位后,::after 伪元素的背景颜色不完全生效?

    这里的::after伪元素设置背景不完全生效? 在示例代码中,由于给::after伪元素设置了absolute定位,导致其脱离了文档流。 问题1:背景颜色不全生效 当::after伪元素设置absolute定位后,如果没有设定left/right/top/bottom等定位信息,它将默认位于元素左上…

    2025年12月24日
    000
  • 如何选择最佳方案实现复杂的UI时间轴效果?

    对于实现颇为复杂的UI效果,既要考虑可行性,又要考虑到开发便捷性。 基于常规CSS技术 使用常规CSS技术实现,可以采用以下思路: 利用伪元素创建动态时间轴,通过改变伪元素的长度和位置来匹配时间范围。使用渐变填充伪元素,表示实际进度。将小圆点作为绝对定位的元素,动态更新其位置,对应每一天的时间点。通…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信