如何在 plotly.js 中添加指针或刻度盘以测量指示器？

Question

我很难将 dial/needle 添加到 plotly.js 的规格图表。

gauge without needle : 正如您在上图中看到的，它是没有任何针的规格表。

gauge with needle : 我想做一个类似“gauge with needle”的东西，这让我很难受。

我的“没有 needle/dial 的仪表”代码：

`https://codepen.io/vivek137/pen/rNyembX`

Answer 1

您需要在仪表图顶部添加箭头注释。我回答了一个类似的问题，在中，我描述了如何使用极坐标找出箭头的结束位置 x 和 y。在引擎盖下，您制作的仪表图的 x 范围为 [0,1]，y 范围为 [0,1]，因此起点是 ax=0.5 和 ax=0，它们是注释的两个参数。然后结束位置由 x = 0.5 + r * cos(theta) 和 y = r * sin(theta) 给出，其中 theta 是从图表右侧截取的角度并逆时针移动。

您应该记住的一件事是，如果浏览器中的渲染区域不是完美的正方形，则可能需要调整 r 和 theta 值。比如my codepen，我用r=0.7，theta=93.5指向40。

let data = [
    {
        mode: "gauge",
        type: "indicator",
        value: 40,

        gauge: {
            shape: "angular",
            bar: {
                color: "blue",
                line: {
                    color: "red",
                    width: 4
                },  
                thickness: 0
            },
            bgcolor: "#388",
            bordercolor: "#a89d32",
            borderwidth: 3,
            axis: {
                range: [0,100],
                visible: true,
                tickmode: "array",
                tickvals: [5, 10, 40, 80, 100],
                ticks: "outside"
            },
            steps: [
                {
                    range: [0, 40],
                    color: "#9032a8"
                }
            ]
        }
    }
]

var theta = 93.5
var r = 0.7
var x_head = r * Math.cos(Math.PI/180*theta)
var y_head = r * Math.sin(Math.PI/180*theta)

let layout = {
  xaxis: {range: [0, 1], showgrid: false, 'zeroline': false, 'visible': false},
  yaxis: {range: [0, 1], showgrid: false, 'zeroline': false, 'visible': false},
  showlegend: false,
  annotations: [
    {
      ax: 0.5,
      ay: 0,
      axref: 'x',
      ayref: 'y',
      x: 0.5+x_head,
      y: y_head,
      xref: 'x',
      yref: 'y',
      showarrow: true,
      arrowhead: 9,
    }
  ]
};
Plotly.newPlot('gauge1', data, layout)

如何在 plotly.js 中添加指针或刻度盘以测量指示器？

how to add a needle or dial to gauge indicator in plotly.js?

javascript

graph

plotly

plotly.js