用于绘图指标图的表针

Question

我目前有一个指标图表（仪表），其中的值由深蓝色中心到达的距离显示。然而，这对我来说看起来有点奇怪，所以我想将其更改为有一个从中心到值的指针/指针，就像速度计一样。这是我当前的代码：

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()

Answer 1

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

\n

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

\n

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

\n

import plotly.graph_objects as go\n\nfig = go.Figure(go.Indicator(\n    mode = "gauge+number",\n    number = {\'suffix\': "% match", \'font\': {\'size\': 50}},\n    value = 80,\n    domain = {\'x\': [0,1], \'y\': [0,1]},\n    gauge = {\n        \'axis\': {\'range\': [None, 100], \'tickwidth\': 1, \'tickcolor\': "darkblue"},\n        \'bar\': {\'color\': "darkblue"},\n        \'bgcolor\': "white",\n        \'borderwidth\': 2,\n        \'bordercolor\': "gray",\n        \'steps\': [\n            {\'range\': [0, 33], \'color\': \'red\'},\n            {\'range\': [33, 66], \'color\': \'yellow\'},\n            {\'range\': [66,100], \'color\': \'green\'}],\n        }))\n\nfig.update_layout(\n    font={\'color\': "black", \'family\': "Arial"},\n    xaxis={\'showgrid\': False, \'range\':[-1,1]},\n    yaxis={\'showgrid\': False, \'range\':[0,1]},\n    # plot_bgcolor=\'rgba(0,0,0,0)\'\n    )\n\n## by setting the range of the layout, we are effectively adding a grid in the background\n## and the radius of the gauge diagram is roughly 0.9 when the grid has a range of [-1,1]x[0,1]\n\nfig.add_annotation(\n    ax=0,\n    ay=0,\n    axref=\'x\',\n    ayref=\'y\',\n    x=0,\n    y=0.9,\n    xref=\'x\',\n    yref=\'y\',\n    showarrow=True,\n    arrowhead=3,\n    arrowsize=1,\n    arrowwidth=4\n    )\n\nfig.show()\n

\n

\n

现在，虽然我们可以通过反复试验来找到箭头应该结束的位置，但这是一个真正的黑客解决方案，根本无法推广。

\n

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

\n

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

\n

由于指示器上的值在 0-100 范围内为 80，因此我们将 180 度旋转角度设为 80/100，结果为180 degrees*(80/100) = 144 degrees。所以你从左下角顺时针旋转144度，或者从右下角逆时针旋转36度。

\n

插入后，我们得到x = 0.9*cos(36 degrees) = 0.72811529493、 和y = 0.9*sin(36 degrees) = 0.52900672706。更新注释：

\n

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

\n

我们得到以下图像：

\n

\n

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

\n

\n

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

\n

from numpy import radians, cos, sin\nimport plotly.graph_objects as go\n\nfig = go.Figure(go.Indicator(\n    mode = "gauge+number",\n    number = {\'suffix\': "% match", \'font\': {\'size\': 50}},\n    value = 80,\n    domain = {\'x\': [0,1], \'y\': [0,1]},\n    gauge = {\n        \'axis\': {\'range\': [None, 100], \'tickwidth\': 1, \'tickcolor\': "darkblue"},\n        \'bar\': {\'color\': "darkblue"},\n        \'bgcolor\': "white",\n        \'borderwidth\': 2,\n        \'bordercolor\': "gray",\n        \'steps\': [\n            {\'range\': [0, 33], \'color\': \'red\'},\n            {\'range\': [33, 66], \'color\': \'yellow\'},\n            {\'range\': [66,100], \'color\': \'green\'}],\n        }))\n\nfig.update_layout(\n    font={\'color\': "black", \'family\': "Arial"},\n    xaxis={\'showgrid\': False, \'showticklabels\':False, \'range\':[-1,1]},\n    yaxis={\'showgrid\': False, \'showticklabels\':False, \'range\':[0,1]},\n    plot_bgcolor=\'rgba(0,0,0,0)\'\n    )\n\n## by setting the range of the layout, we are effectively adding a grid in the background\n## and the radius of the gauge diagram is roughly 0.9 when the grid has a range of [-1,1]x[0,1]\n\ntheta = 40\nr= 0.9\nx_head = r * cos(radians(theta))\ny_head = r * sin(radians(theta))\n\nfig.add_annotation(\n    ax=0,\n    ay=0,\n    axref=\'x\',\n    ayref=\'y\',\n    x=x_head,\n    y=y_head,\n    xref=\'x\',\n    yref=\'y\',\n    showarrow=True,\n    arrowhead=3,\n    arrowsize=1,\n    arrowwidth=4\n    )\n\nfig.show()\n

\n

\n