如何在plotly.js中添加指针或表盘来测量指示器？

Question

我很难将表盘/指针添加到plotly.js的仪表盘图表中。

gauge without needle：正如你在上面的图像中看到的，它的仪表图没有任何指针。

gauge with needle：我想构建类似于“针规”的东西，这让我很难做到。

我的代码是“仪表无针/表盘”：

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

Answer 1

您需要在仪表图的顶部添加箭头注释。我回答了一个类似的问题，在that answer中，我描述了如何使用极坐标来找到箭头的结束位置x和y。实际上，您制作的仪表图的x范围为0,1，y范围为0,1，因此起点是ax=0.5和ax=0，这两个参数都是注释的参数。然后，结束位置由x = 0.5 + r * cos(theta)和y = r * sin(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)

​

​