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

Posted 2023-02-18

【中文标题】如何在 plotly.js 中添加针或刻度盘来测量指示器？

【英文标题】：how to add a needle or dial to gauge indicator in plotly.js?

【发布时间】：2021-08-04 07:56:06

【问题描述】：

我很难将刻度盘/指针从 plotly.js 添加到仪表图表。

gauge without needle : 如上图所示，它是没有任何针头的仪表盘。

gauge with needle : 我想制作类似“带针的量规”的东西，这让我很难受。

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

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

【参考方案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) 给出，其中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)