数据可视化数据分析【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址https://gitcode.com/gh_mirrors/pl/plotly.py点击查看免费下载本篇技术指南围绕 Plotlyplotly.graph_objects的Indicator 追踪类型展开系统讲解如何用go.Indicator可视化单个核心数值——无论你想展示的是仪表盘angular gauge、子弹图bullet gauge、大数据卡片data card还是带涨跌对比的 delta 数值。读完本文你将掌握value、mode、align、domain四个顶层属性的用法深入理解number、delta、gauge三个可视化元素容器及其全部关键子属性并能组合多个 Indicator 实现 KPI 面板、图表覆盖层overlay等多种实战方案。什么是 Indicator三种可视化元素概览Indicator 是一种特殊的 Plotly 追踪类型其唯一使命是可视化由value属性指定的单个数值。与散点图、柱状图等需要数据数组的追踪不同Indicator 只需一个标量值即可渲染。根据mode属性的取值可以用三种独立且可自由组合的可视化元素来表现这个数值元素作用典型应用number以纯文本形式显示数值大数字卡片、KPI 指标delta显示当前值相对某个参考值reference的差值涨跌对比、同比环比gauge在坐标轴上以图形方式显示数值仪表盘、子弹图mode是一个 flaglist 类型的属性可以通过号自由拼接三种元素例如numberdelta、numbergauge、numberdeltagauge。从 源码 中可以看到mode的合法取值为[number, delta, gauge]的任意组合。Indicator 的顶层属性_valid_props见 顶层定义还包括value要可视化的数值整个图表的唯一数据来源mode决定绘制哪些可视化元素alignnumber和delta的水平对齐方式枚举值为[left, center, right]。注意源码特别指出当显示 angular gauge 时该属性无效果此时文本总是居中domain该 Indicator 在图幅figure中的位置范围用x/y两个归一化区间[0, 1]或网格的row/column索引指定其他通用属性title标题、customdata、ids、meta、legend、legendrank、name、visible等。三种可视化元素分别通过各自的容器配置number、delta、gauge。下面逐一展开。配置 number数字文本的格式化number容器实现见 number 源码只有 4 个属性用于控制主数字的显示效果valueformat数值格式化规则使用 d3 格式化迷你语言与 Python 的格式化语法非常相似。例如.0f表示保留 0 位小数、,.2f表示保留两位小数并带千分位分隔符prefix出现在数字之前的字符串如$、¥suffix出现在数字之后的字符串如m、%font控制数字字体的family、size、color等。配置 delta展示相对变化delta容器实现见 delta 源码用于显示当前value与参考值的差其完整属性如下属性说明取值/默认reference计算差值所用的参考值源码注释明确默认取当前值本身即差值为 0int / floatrelative是否显示相对变化百分比形式布尔值Falsevalueformatdelta 的 d3 格式化规则字符串increasing.color/increasing.symbol差值增大时的颜色与符号颜色值 / 符号字符串decreasing.color/decreasing.symbol差值减小时的颜色与符号颜色值 / 符号字符串font.family/font.sizedelta 字体—positiondelta 相对number的位置枚举[top, bottom, left, right]prefixdelta 之前的字符串字符串suffixdelta 之后的字符串字符串注意delta上的prefix与suffix是较新版本5.10加入的功能旧版本中只有number支持前后缀。配置 gauge仪表盘与子弹图gauge容器实现见 gauge 源码属性最丰富包括shape仪表形状枚举值为[angular, bullet]分别对应角度仪表盘和子弹图axis仪表坐标轴配置见下文bar设置仪表上表示当前值的条/指针的外观如color、line、thicknesssteps刻度区间列表用于在仪表上绘制多色分区如红/黄/绿安全区间每个Step可设置range区间与colorthreshold阈值线配置包含value阈值数值、thickness线宽取值为[0, 1]的分数相对仪表厚度和line线条颜色与宽度见 threshold 源码bgcolor仪表背景色bordercolor/borderwidth包围仪表边框的颜色与宽度px。gauge.axis是功能最完整的子容器见 axis 源码几乎复刻了常规坐标轴的全部刻度控制能力range刻度范围、tickmode/tick0/dtick刻度步长、nticks刻度数量、tickformat刻度格式、tickvals/ticktext自定义刻度、tickangle/ticklen/tickwidth、showticklabels、tickprefix/ticksuffix、tickcolor、tickfont以及exponentformat指数格式none/e/E/power/SI/B、separatethousands千分位分隔等。最常用的组合是设置axis.range限定量程并用axis.visible: False隐藏刻度线。配置 title 与多元素组合示例Indicator 通过title容器实现见 title 源码添加简单标题包含三个属性text标题字符串、align对齐方式枚举[left, center, right]源码注明默认居中但bullet 图默认右对齐、font字体。title.text支持 HTML 片段配合br和span style...可以构造带副标题的多行标题这在数据卡片中非常实用。下面是一个综合展示 angular、bullet 两种形状以及 gauge、delta、value 三种模式的组合示例import plotly.graph_objects as go fig go.Figure() # 1) 隐藏轴线的角度仪表盘 fig.add_trace(go.Indicator( value 200, delta {reference: 160}, gauge { axis: {visible: False}}, domain {row: 0, column: 0})) # 2) 子弹图bullet fig.add_trace(go.Indicator( value 120, gauge { shape: bullet, axis : {visible: False}}, domain {x: [0.05, 0.5], y: [0.15, 0.35]})) # 3) 数字 涨跌对比 fig.add_trace(go.Indicator( mode numberdelta, value 300, domain {row: 0, column: 1})) # 4) 仅 delta fig.add_trace(go.Indicator( mode delta, value 40, domain {row: 1, column: 1})) fig.update_layout( grid {rows: 2, columns: 2, pattern: independent}, template {data : {indicator: [{ title: {text: Speed}, mode : numberdeltagauge, delta : {reference: 90}}] }})这里展示了domain的两种指定方式基于网格的{row: 0, column: 0}配合layout.grid的rows/columns与pattern: independent使用以及基于归一化坐标的{x: [0.05, 0.5], y: [0.15, 0.35]}。同时演示了通过template为所有 indicator 追踪统一注入默认配置标题、模式、delta 参考值。单角度仪表盘与子弹图最简单的用法是只绘制一个角度仪表盘import plotly.graph_objects as go fig go.Figure(go.Indicator( mode gaugenumber, value 450, title {text: Speed}, domain {x: [0, 1], y: [0, 1]} )) fig.show()上例将仪表占满整个画布domain的x、y均取[0, 1]同时显示仪表与数值。子弹图Bullet Gauge子弹图是角度仪表盘的横向等价物只需把gauge.shape设为bulletimport plotly.graph_objects as go fig go.Figure(go.Indicator( mode numbergaugedelta, gauge {shape: bullet}, delta {reference: 300}, value 220, domain {x: [0.1, 1], y: [0.2, 0.9]}, title {text: Avg order size})) fig.show()子弹图将数值条、量程刻度和 delta 纵向排布非常适合在仪表板中横向排列多个 KPI。结合gauge.steps色带区间与gauge.threshold阈值线可以构建带有安全/危险分区的子弹图。在图表上方叠加 IndicatorOverlayIndicator 的一个重要特性是它始终绘制在其他追踪类型包括 3D 图表的上方因此天然适合作为覆盖层overlay使用。下面的例子在折线图上方叠加一个在线用户数数据卡片import plotly.graph_objects as go fig go.Figure(go.Indicator( mode numberdelta, value 492, delta {reference: 512, valueformat: .0f}, title {text: Users online}, domain {y: [0, 1], x: [0.25, 0.75]})) fig.add_trace(go.Scatter( y [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492])) fig.update_layout(xaxis {range: [0, 62]}) fig.show()delta.valueformat: .0f让差值不显示小数domain.x取[0.25, 0.75]将数据卡片定位在画布中部上方与折线互不干扰。这种图表 关键数字的组合模式在实时监控面板中非常常见。数据卡片 / 大数字Big Numbers在报表场景中有时一个数字就是全部内容——例如总销售额、年度营收。数据卡片Data Card用最简洁的方式呈现这类大数字import plotly.graph_objects as go fig go.Figure(go.Indicator( mode numberdelta, value 400, number {prefix: $}, delta {position: top, reference: 320}, domain {x: [0, 1], y: [0, 1]})) fig.update_layout(paper_bgcolor lightgray) fig.show()这里number.prefix给主数字加上了货币符号$delta.position: top把涨跌信息放到数字上方paper_bgcolor则设置了整张画布的背景色营造卡片质感。在同一个 Figure 中展示多个数字通过add_trace添加多个 Indicator并借助domain划分各自的区域可以在一张图中展示多个指标。配合delta.relative: True还能以百分比形式显示相对变化import plotly.graph_objects as go fig go.Figure() fig.add_trace(go.Indicator( mode numberdelta, value 200, domain {x: [0, 0.5], y: [0, 0.5]}, delta {reference: 400, relative: True, position : top})) fig.add_trace(go.Indicator( mode numberdelta, value 350, delta {reference: 400, relative: True}, domain {x: [0, 0.5], y: [0.5, 1]})) fig.add_trace(go.Indicator( mode numberdelta, value 450, title {text: Accountsbrspan stylefont-size:0.8em;color:graySubtitle/spanbrspan stylefont-size:0.8em;color:graySubsubtitle/span}, delta {reference: 400, relative: True}, domain {x: [0.6, 1], y: [0, 1]})) fig.show()这个示例展示了三类要点区域划分用domain的归一化区间把画布切成四个象限每个 Indicator 各占一区相对变化delta.relative: True将差值渲染为百分比例如 value200、reference400 会显示-50%富文本标题title.text中嵌入br与带font-size、color样式的span构造主标题 副标题 次级副标题的多层结构并且三个区域共用同一个标题布局。为 number 与 delta 添加前缀和后缀在number和delta上都可以通过prefix添加前置字符串、通过suffix添加后置字符串。下面的例子同时给数字和涨跌值加上$前缀与m百万后缀import plotly.graph_objects as go fig go.Figure(go.Indicator( mode numberdelta, value 492, number {prefix: $, suffix: m}, delta {reference: 512, valueformat: .0f, prefix: $, suffix: m}, title {text: Profit}, domain {y: [0, 1], x: [0.25, 0.75]})) fig.add_trace(go.Scatter( y [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492])) fig.update_layout(xaxis {range: [0, 62]}) fig.show()进阶提示mode的语义源码注释mode定义明确说明number以文本显示数值、delta以文本显示与参考值的差、gauge在坐标轴上以图形显示数值。三者互不冲突可按需任意组合。delta.reference的默认值源码中reference的说明为默认设置为当前值本身意味着不指定时 delta 恒为 0——因此实际使用中必须显式设置reference才能让 delta 有意义。颜色取值gauge.bgcolor、bordercolor、steps[].color、delta.increasing/decreasing.color等颜色属性均支持完整的 CSS Color 4 规范格式hex、rgb/rgba、hsl/hsla、hwb、lab/lch/oklab/oklch、color(display-p3 ...)以及所有命名颜色。更多属性参考完整的 Indicator 属性清单见 Indicator 追踪源码共 738 行全部为自动生成的属性定义子容器源码位于 indicator 包 下包含_delta.py、_number.py、_gauge.py、_title.py、_domain.py以及gauge/子目录下的_axis.py、_bar.py、_step.py、_threshold.py可作为离线查阅的完整参考手册。总结Indicator 是 Plotly 中成本最低、效果最直观的单值可视化方案value提供数据mode决定呈现方式number/delta/gauge三个容器负责细节打磨domain负责布局定位。它既可以独立渲染成仪表盘、子弹图或大数字卡片也可以作为覆盖层叠加在其他图表之上是构建 KPI 监控面板、经营日报、数据大屏时不可或缺的工具。赞分享数据可视化数据分析【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址https://gitcode.com/gh_mirrors/pl/plotly.py点击查看免费下载相关推荐Windows 11界面太陌生5分钟教你用ExplorerPatcher恢复经典Windows 10体验Windows 11界面太陌生5分钟教你用ExplorerPatcher恢复经典Windows 10体验 还在为Windows 11的全新界面感到不适应吗每桌面应用系统编程QMQTT面向Qt应用的高性能MQTT客户端解决方案QMQTT面向Qt应用的高性能MQTT客户端解决方案 在物联网和实时通信领域Qt开发者经常面临一个技术挑战如何在Qt框架中高效集成MQTT协议同时保持代数据可视化数据分析Metabase Gauge 仪表盘图表Gauge Chart完整指南数据要求、范围配置与格式技巧Metabase Gauge 仪表盘图表Gauge Chart完整指南数据要求、范围配置与格式技巧 Gauge仪表盘图表是 Metabase 中用于在数据分析数据可视化后端数据库客户端企业应用上一篇容器网络安全Awesome Design Patterns 网络策略与加密下一篇Awesome Design Patterns 后端异步任务分布式任务调度创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Plotly Indicator 仪表盘图表完全指南：number、delta 与 gauge 的组合配置与实战
数据可视化数据分析【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址https://gitcode.com/gh_mirrors/pl/plotly.py点击查看免费下载本篇技术指南围绕 Plotlyplotly.graph_objects的Indicator 追踪类型展开系统讲解如何用go.Indicator可视化单个核心数值——无论你想展示的是仪表盘angular gauge、子弹图bullet gauge、大数据卡片data card还是带涨跌对比的 delta 数值。读完本文你将掌握value、mode、align、domain四个顶层属性的用法深入理解number、delta、gauge三个可视化元素容器及其全部关键子属性并能组合多个 Indicator 实现 KPI 面板、图表覆盖层overlay等多种实战方案。什么是 Indicator三种可视化元素概览Indicator 是一种特殊的 Plotly 追踪类型其唯一使命是可视化由value属性指定的单个数值。与散点图、柱状图等需要数据数组的追踪不同Indicator 只需一个标量值即可渲染。根据mode属性的取值可以用三种独立且可自由组合的可视化元素来表现这个数值元素作用典型应用number以纯文本形式显示数值大数字卡片、KPI 指标delta显示当前值相对某个参考值reference的差值涨跌对比、同比环比gauge在坐标轴上以图形方式显示数值仪表盘、子弹图mode是一个 flaglist 类型的属性可以通过号自由拼接三种元素例如numberdelta、numbergauge、numberdeltagauge。从 源码 中可以看到mode的合法取值为[number, delta, gauge]的任意组合。Indicator 的顶层属性_valid_props见 顶层定义还包括value要可视化的数值整个图表的唯一数据来源mode决定绘制哪些可视化元素alignnumber和delta的水平对齐方式枚举值为[left, center, right]。注意源码特别指出当显示 angular gauge 时该属性无效果此时文本总是居中domain该 Indicator 在图幅figure中的位置范围用x/y两个归一化区间[0, 1]或网格的row/column索引指定其他通用属性title标题、customdata、ids、meta、legend、legendrank、name、visible等。三种可视化元素分别通过各自的容器配置number、delta、gauge。下面逐一展开。配置 number数字文本的格式化number容器实现见 number 源码只有 4 个属性用于控制主数字的显示效果valueformat数值格式化规则使用 d3 格式化迷你语言与 Python 的格式化语法非常相似。例如.0f表示保留 0 位小数、,.2f表示保留两位小数并带千分位分隔符prefix出现在数字之前的字符串如$、¥suffix出现在数字之后的字符串如m、%font控制数字字体的family、size、color等。配置 delta展示相对变化delta容器实现见 delta 源码用于显示当前value与参考值的差其完整属性如下属性说明取值/默认reference计算差值所用的参考值源码注释明确默认取当前值本身即差值为 0int / floatrelative是否显示相对变化百分比形式布尔值Falsevalueformatdelta 的 d3 格式化规则字符串increasing.color/increasing.symbol差值增大时的颜色与符号颜色值 / 符号字符串decreasing.color/decreasing.symbol差值减小时的颜色与符号颜色值 / 符号字符串font.family/font.sizedelta 字体—positiondelta 相对number的位置枚举[top, bottom, left, right]prefixdelta 之前的字符串字符串suffixdelta 之后的字符串字符串注意delta上的prefix与suffix是较新版本5.10加入的功能旧版本中只有number支持前后缀。配置 gauge仪表盘与子弹图gauge容器实现见 gauge 源码属性最丰富包括shape仪表形状枚举值为[angular, bullet]分别对应角度仪表盘和子弹图axis仪表坐标轴配置见下文bar设置仪表上表示当前值的条/指针的外观如color、line、thicknesssteps刻度区间列表用于在仪表上绘制多色分区如红/黄/绿安全区间每个Step可设置range区间与colorthreshold阈值线配置包含value阈值数值、thickness线宽取值为[0, 1]的分数相对仪表厚度和line线条颜色与宽度见 threshold 源码bgcolor仪表背景色bordercolor/borderwidth包围仪表边框的颜色与宽度px。gauge.axis是功能最完整的子容器见 axis 源码几乎复刻了常规坐标轴的全部刻度控制能力range刻度范围、tickmode/tick0/dtick刻度步长、nticks刻度数量、tickformat刻度格式、tickvals/ticktext自定义刻度、tickangle/ticklen/tickwidth、showticklabels、tickprefix/ticksuffix、tickcolor、tickfont以及exponentformat指数格式none/e/E/power/SI/B、separatethousands千分位分隔等。最常用的组合是设置axis.range限定量程并用axis.visible: False隐藏刻度线。配置 title 与多元素组合示例Indicator 通过title容器实现见 title 源码添加简单标题包含三个属性text标题字符串、align对齐方式枚举[left, center, right]源码注明默认居中但bullet 图默认右对齐、font字体。title.text支持 HTML 片段配合br和span style...可以构造带副标题的多行标题这在数据卡片中非常实用。下面是一个综合展示 angular、bullet 两种形状以及 gauge、delta、value 三种模式的组合示例import plotly.graph_objects as go fig go.Figure() # 1) 隐藏轴线的角度仪表盘 fig.add_trace(go.Indicator( value 200, delta {reference: 160}, gauge { axis: {visible: False}}, domain {row: 0, column: 0})) # 2) 子弹图bullet fig.add_trace(go.Indicator( value 120, gauge { shape: bullet, axis : {visible: False}}, domain {x: [0.05, 0.5], y: [0.15, 0.35]})) # 3) 数字 涨跌对比 fig.add_trace(go.Indicator( mode numberdelta, value 300, domain {row: 0, column: 1})) # 4) 仅 delta fig.add_trace(go.Indicator( mode delta, value 40, domain {row: 1, column: 1})) fig.update_layout( grid {rows: 2, columns: 2, pattern: independent}, template {data : {indicator: [{ title: {text: Speed}, mode : numberdeltagauge, delta : {reference: 90}}] }})这里展示了domain的两种指定方式基于网格的{row: 0, column: 0}配合layout.grid的rows/columns与pattern: independent使用以及基于归一化坐标的{x: [0.05, 0.5], y: [0.15, 0.35]}。同时演示了通过template为所有 indicator 追踪统一注入默认配置标题、模式、delta 参考值。单角度仪表盘与子弹图最简单的用法是只绘制一个角度仪表盘import plotly.graph_objects as go fig go.Figure(go.Indicator( mode gaugenumber, value 450, title {text: Speed}, domain {x: [0, 1], y: [0, 1]} )) fig.show()上例将仪表占满整个画布domain的x、y均取[0, 1]同时显示仪表与数值。子弹图Bullet Gauge子弹图是角度仪表盘的横向等价物只需把gauge.shape设为bulletimport plotly.graph_objects as go fig go.Figure(go.Indicator( mode numbergaugedelta, gauge {shape: bullet}, delta {reference: 300}, value 220, domain {x: [0.1, 1], y: [0.2, 0.9]}, title {text: Avg order size})) fig.show()子弹图将数值条、量程刻度和 delta 纵向排布非常适合在仪表板中横向排列多个 KPI。结合gauge.steps色带区间与gauge.threshold阈值线可以构建带有安全/危险分区的子弹图。在图表上方叠加 IndicatorOverlayIndicator 的一个重要特性是它始终绘制在其他追踪类型包括 3D 图表的上方因此天然适合作为覆盖层overlay使用。下面的例子在折线图上方叠加一个在线用户数数据卡片import plotly.graph_objects as go fig go.Figure(go.Indicator( mode numberdelta, value 492, delta {reference: 512, valueformat: .0f}, title {text: Users online}, domain {y: [0, 1], x: [0.25, 0.75]})) fig.add_trace(go.Scatter( y [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492])) fig.update_layout(xaxis {range: [0, 62]}) fig.show()delta.valueformat: .0f让差值不显示小数domain.x取[0.25, 0.75]将数据卡片定位在画布中部上方与折线互不干扰。这种图表 关键数字的组合模式在实时监控面板中非常常见。数据卡片 / 大数字Big Numbers在报表场景中有时一个数字就是全部内容——例如总销售额、年度营收。数据卡片Data Card用最简洁的方式呈现这类大数字import plotly.graph_objects as go fig go.Figure(go.Indicator( mode numberdelta, value 400, number {prefix: $}, delta {position: top, reference: 320}, domain {x: [0, 1], y: [0, 1]})) fig.update_layout(paper_bgcolor lightgray) fig.show()这里number.prefix给主数字加上了货币符号$delta.position: top把涨跌信息放到数字上方paper_bgcolor则设置了整张画布的背景色营造卡片质感。在同一个 Figure 中展示多个数字通过add_trace添加多个 Indicator并借助domain划分各自的区域可以在一张图中展示多个指标。配合delta.relative: True还能以百分比形式显示相对变化import plotly.graph_objects as go fig go.Figure() fig.add_trace(go.Indicator( mode numberdelta, value 200, domain {x: [0, 0.5], y: [0, 0.5]}, delta {reference: 400, relative: True, position : top})) fig.add_trace(go.Indicator( mode numberdelta, value 350, delta {reference: 400, relative: True}, domain {x: [0, 0.5], y: [0.5, 1]})) fig.add_trace(go.Indicator( mode numberdelta, value 450, title {text: Accountsbrspan stylefont-size:0.8em;color:graySubtitle/spanbrspan stylefont-size:0.8em;color:graySubsubtitle/span}, delta {reference: 400, relative: True}, domain {x: [0.6, 1], y: [0, 1]})) fig.show()这个示例展示了三类要点区域划分用domain的归一化区间把画布切成四个象限每个 Indicator 各占一区相对变化delta.relative: True将差值渲染为百分比例如 value200、reference400 会显示-50%富文本标题title.text中嵌入br与带font-size、color样式的span构造主标题 副标题 次级副标题的多层结构并且三个区域共用同一个标题布局。为 number 与 delta 添加前缀和后缀在number和delta上都可以通过prefix添加前置字符串、通过suffix添加后置字符串。下面的例子同时给数字和涨跌值加上$前缀与m百万后缀import plotly.graph_objects as go fig go.Figure(go.Indicator( mode numberdelta, value 492, number {prefix: $, suffix: m}, delta {reference: 512, valueformat: .0f, prefix: $, suffix: m}, title {text: Profit}, domain {y: [0, 1], x: [0.25, 0.75]})) fig.add_trace(go.Scatter( y [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492])) fig.update_layout(xaxis {range: [0, 62]}) fig.show()进阶提示mode的语义源码注释mode定义明确说明number以文本显示数值、delta以文本显示与参考值的差、gauge在坐标轴上以图形显示数值。三者互不冲突可按需任意组合。delta.reference的默认值源码中reference的说明为默认设置为当前值本身意味着不指定时 delta 恒为 0——因此实际使用中必须显式设置reference才能让 delta 有意义。颜色取值gauge.bgcolor、bordercolor、steps[].color、delta.increasing/decreasing.color等颜色属性均支持完整的 CSS Color 4 规范格式hex、rgb/rgba、hsl/hsla、hwb、lab/lch/oklab/oklch、color(display-p3 ...)以及所有命名颜色。更多属性参考完整的 Indicator 属性清单见 Indicator 追踪源码共 738 行全部为自动生成的属性定义子容器源码位于 indicator 包 下包含_delta.py、_number.py、_gauge.py、_title.py、_domain.py以及gauge/子目录下的_axis.py、_bar.py、_step.py、_threshold.py可作为离线查阅的完整参考手册。总结Indicator 是 Plotly 中成本最低、效果最直观的单值可视化方案value提供数据mode决定呈现方式number/delta/gauge三个容器负责细节打磨domain负责布局定位。它既可以独立渲染成仪表盘、子弹图或大数字卡片也可以作为覆盖层叠加在其他图表之上是构建 KPI 监控面板、经营日报、数据大屏时不可或缺的工具。赞分享数据可视化数据分析【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址https://gitcode.com/gh_mirrors/pl/plotly.py点击查看免费下载相关推荐Windows 11界面太陌生5分钟教你用ExplorerPatcher恢复经典Windows 10体验Windows 11界面太陌生5分钟教你用ExplorerPatcher恢复经典Windows 10体验 还在为Windows 11的全新界面感到不适应吗每桌面应用系统编程QMQTT面向Qt应用的高性能MQTT客户端解决方案QMQTT面向Qt应用的高性能MQTT客户端解决方案 在物联网和实时通信领域Qt开发者经常面临一个技术挑战如何在Qt框架中高效集成MQTT协议同时保持代数据可视化数据分析Metabase Gauge 仪表盘图表Gauge Chart完整指南数据要求、范围配置与格式技巧Metabase Gauge 仪表盘图表Gauge Chart完整指南数据要求、范围配置与格式技巧 Gauge仪表盘图表是 Metabase 中用于在数据分析数据可视化后端数据库客户端企业应用上一篇容器网络安全Awesome Design Patterns 网络策略与加密下一篇Awesome Design Patterns 后端异步任务分布式任务调度创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考