用于绘图指示图的仪表针 [英] Gauge needle for plotly indicator graph

问题描述

我目前有一个指标图表(仪表)，其中的值由深蓝色中心到达的距离显示.但是，这对我来说看起来有点奇怪，所以我想将其更改为从中心到值的指针/指针，例如速度计.这是我当前的代码:

I currently have an indicator chart (gauge) from plotly where the value is shown by how far a dark blue center reaches. However, that looks a bit odd to me, so I would like to change it to have a needle/pointer from the center to the value, like a speedometer. Here is my current code:

import plotly.graph_objects as go
fig = go.Figure(go.Indicator(
    mode = "gauge+number",
    number = {'suffix': "% match", 'font': {'size': 50}},
    value = 80,
    domain = {'x': [0,1], 'y': [0,1]},
    gauge = {
        'axis': {'range': [None, 100], 'tickwidth': 1, 'tickcolor': "darkblue"},
        'bar': {'color': "darkblue"},
        'bgcolor': "white",
        'borderwidth': 2,
        'bordercolor': "gray",
        'steps': [
            {'range': [0, 33], 'color': 'red'},
            {'range': [33, 66], 'color': 'yellow'},
            {'range': [66,100], 'color': 'green'}],
        }))

fig.update_layout(font = {'color': "black", 'family': "Arial"})

fig.show()

推荐答案

我的建议是添加一个覆盖指标图表的箭头注释.

My suggestion would be to add an arrow annotation that overlays the indicator chart.

通过将图表的范围设置为 [-1,1] x [0,1]，我们基本上是在创建一个新的坐标系，箭头所在的坐标系，我们可以近似箭头应该去的位置，以便对应于您的指标图表上的值.这也将确保点 (0,0) 位于图表的中心，这很方便，因为这将是箭头的端点之一.

By setting the range of the chart to [-1,1] x [0,1] we are basically creating a new coordinate system that the arrow will be on, we can approximate where the arrow should go to in order to correspond to the value on your indicator chart. This will also ensure that the point (0,0) is at the center of your chart which is convenient since that will be one of the arrow's endpoints.

添加箭头注释时，ax 和 ay 是箭头尾部的坐标，因此我们希望它位于图表的中间，位于 ax=0 和 ay=0.我将箭头笔直放置，以显示指标图表相对于图表的半径对于我的浏览器窗口大约是 0.9 个单位.这对您来说可能有所不同.

When adding an arrow annotation ax and ay are coordinates for the tail of your arrow, so we want that in the middle of our chart which would be at ax=0 and ay=0. I placed the arrow straight up to show that the radius of the indicator chart with respect to the chart is approximately 0.9 units for my browser window. This may be different for yours.

import plotly.graph_objects as go

fig = go.Figure(go.Indicator(
    mode = "gauge+number",
    number = {'suffix': "% match", 'font': {'size': 50}},
    value = 80,
    domain = {'x': [0,1], 'y': [0,1]},
    gauge = {
        'axis': {'range': [None, 100], 'tickwidth': 1, 'tickcolor': "darkblue"},
        'bar': {'color': "darkblue"},
        'bgcolor': "white",
        'borderwidth': 2,
        'bordercolor': "gray",
        'steps': [
            {'range': [0, 33], 'color': 'red'},
            {'range': [33, 66], 'color': 'yellow'},
            {'range': [66,100], 'color': 'green'}],
        }))

fig.update_layout(
    font={'color': "black", 'family': "Arial"},
    xaxis={'showgrid': False, 'range':[-1,1]},
    yaxis={'showgrid': False, 'range':[0,1]},
    # plot_bgcolor='rgba(0,0,0,0)'
    )

## by setting the range of the layout, we are effectively adding a grid in the background
## and the radius of the gauge diagram is roughly 0.9 when the grid has a range of [-1,1]x[0,1]

fig.add_annotation(
    ax=0,
    ay=0,
    axref='x',
    ayref='y',
    x=0,
    y=0.9,
    xref='x',
    yref='y',
    showarrow=True,
    arrowhead=3,
    arrowsize=1,
    arrowwidth=4
    )

fig.show()

现在，虽然我们可以通过反复试验来找出箭头应该在哪里结束，但这是一个真正难以推广的解决方案.

Now while we could use trial and error to find where the arrow should end, that's a truly hacky solution which isn't generalizable at all.

对于接下来的步骤，我建议您为浏览器窗口大小选择一个纵横比，使指标图表尽可能接近圆形(例如，极端纵横比将使您的指标图表更加椭圆，我是做一个简单的假设，即指标图表是一个完美的圆).

For the next steps, I would recommend you choose an aspect ratio for your browser window size that keeps the indicator chart as close to a circle as possible (e.g. an extreme aspect ratio will make your indicator chart more elliptical, and I am making a simple assumption that the indicator chart is a perfect circle).

因此，假设指标图表大致是一个半径 ≈ 0.9 的圆(在我的情况下，您的半径可能不同)，我们可以使用极坐标找到您的圆的 x 和 y 坐标:x = r*cos(θ) 和 y = r*sin(θ).请注意，此公式仅对以 (0,0) 为中心的圆有效，这就是我们将您的图表居中的原因.

So, under the assumption that the indicator chart is roughly a circle with radius ≈ 0.9 (in my case, your radius might be different), we can find the x and y coordinates of your circle using polar coordinates: x = r*cos(θ) and y = r*sin(θ). Note that this formula is only valid for a circle centered at (0,0), which is why we centered your chart at this point.

由于指标上的值在 0-100 的范围内为 80，因此我们是 180 度旋转角度的 80/100，结果为 180 度*(80/100) =144度.因此，您从左下角顺时针旋转 144 度，或从右下角逆时针旋转 36 度.

Since the value on the indicator is 80 on a scale of 0-100, we are 80/100 of the way of an 180 angle of rotation, which comes out to 180 degrees*(80/100) = 144 degrees. So you are rotating 144 degrees clockwise from the lower left corner, or 36 degrees counterclockwise from the lower right corner.

插入，我们得到x = 0.9*cos(36 degree) = 0.72811529493，并且y = 0.9*sin(36 degree) = 0.52900672706.更新注释:

Plugging in, we get x = 0.9*cos(36 degrees) = 0.72811529493, and y = 0.9*sin(36 degrees) = 0.52900672706. Updating the annotation:

fig.add_annotation(
    ax=0,
    ay=0,
    axref='x',
    ayref='y',
    x=0.72811529493,
    y=0.52900672706,
    xref='x',
    yref='y',
    showarrow=True,
    arrowhead=3,
    arrowsize=1,
    arrowwidth=4
    )

我们得到以下图像:

所以这很接近，但不是一门精确的科学.对于我的浏览器窗口，让我们将角度稍微调高到 40 度.重复同样的过程x = 0.9*cos(40 degree) = 0.6894399988，和y = 0.9*cos(40 degree) = 0.57850884871，并更新标注坐标，我得到以下图表:

So this is pretty close but not an exact science. For my browser window, let's adjust the angle slightly higher to 40 degrees. Repeating the same process x = 0.9*cos(40 degrees) = 0.6894399988, and y = 0.9*cos(40 degrees) = 0.57850884871, and updating the annotation coordinates, I get the following chart:

为了使图表更漂亮，我们现在可以删除图表的箭头注释刻度标签，并使背景透明.为了让这个方法更容易调整，我制作了 theta 和 r 变量.

To make the chart prettier, we can now remove tick labels of the chart for the arrow annotation, and also make the background transparent. And to make this method more easy to adjust, I have made theta and r variables.

from numpy import radians, cos, sin
import plotly.graph_objects as go

fig = go.Figure(go.Indicator(
    mode = "gauge+number",
    number = {'suffix': "% match", 'font': {'size': 50}},
    value = 80,
    domain = {'x': [0,1], 'y': [0,1]},
    gauge = {
        'axis': {'range': [None, 100], 'tickwidth': 1, 'tickcolor': "darkblue"},
        'bar': {'color': "darkblue"},
        'bgcolor': "white",
        'borderwidth': 2,
        'bordercolor': "gray",
        'steps': [
            {'range': [0, 33], 'color': 'red'},
            {'range': [33, 66], 'color': 'yellow'},
            {'range': [66,100], 'color': 'green'}],
        }))

fig.update_layout(
    font={'color': "black", 'family': "Arial"},
    xaxis={'showgrid': False, 'showticklabels':False, 'range':[-1,1]},
    yaxis={'showgrid': False, 'showticklabels':False, 'range':[0,1]},
    plot_bgcolor='rgba(0,0,0,0)'
    )

## by setting the range of the layout, we are effectively adding a grid in the background
## and the radius of the gauge diagram is roughly 0.9 when the grid has a range of [-1,1]x[0,1]

theta = 40
r= 0.9
x_head = r * cos(radians(theta))
y_head = r * sin(radians(theta))

fig.add_annotation(
    ax=0,
    ay=0,
    axref='x',
    ayref='y',
    x=x_head,
    y=y_head,
    xref='x',
    yref='y',
    showarrow=True,
    arrowhead=3,
    arrowsize=1,
    arrowwidth=4
    )

fig.show()

这篇关于用于绘图指示图的仪表针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！