如何在量表中旋转刻度盘?精巧地使用python [英] How to rotate the dial in a gauge chart? Using python plotly

问题描述

我最近开始使用 plotly 包在python中使用量规表.

I am recently into using plotly package for a gauge chart in python.

在教程和模板此处之后， 我想知道是否有一种方法可以旋转给定角度值的拨号"或针"?

After going through the tutorial and template here, I wonder if there is a way to rotate the "dial" or "needle" given a angle value?

有人建议我使用css: transform 来完成技巧，但我仍然很难知道如何将css应用于可绘制的脚本.

Someone has suggested me using css: transform to do the trick, but still it's hard for me to know how to apply css to the plotly script.

简短的代码将是不错的选择. 预先谢谢你.

A short and simple code would be great. Thank you in advance.

推荐答案

这个问题有点晚了.尽管仍然需要解决，但我对这个问题的解决方案是:

A bit late to this question. My solution to this problem, though it still needs work is:

我正在使用svg路径进行绘图教程中给出的拨号，即

I was using the svg path for the dial given in the plotly tutorial, namely

M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z

中心点(0.24,0.65)接触量规内部的圆弧.因此，拱是一个以(0.24,0.5)为中心且半径为0.15的圆.

The center point (0.24,0.65) touches the arch of the circle on the inner part of the gauge. Thus, the arch is a circle with its center at (0.24,0.5) and a radius of 0.15.

给出一个以弧度表示的角度theta，以一个中心点(h,k)并以极坐标形式表示一个圆，我们可以很容易地获得圆上该点的笛卡尔坐标，如下所示:

Given an angle theta in radians, a center (h,k), and expressing a circle in polar form, we can easily obtain cartesian coordinates for a point on the circle at that degree as follows:

x = h +  r * cos(theta)
y = k +  r * sin(theta)

然后我们可以简单地将我们的输入映射到它在量规上应该具有的预期角度，然后从那里计算x和y.对于我在python中使用math库的实现，这可以转换为以下内容:

We can then simply map our input to the expected angle it is supposed to have on the gauge and calculate x and y from there. For my implementation in python, using the math library, this translates to the following:

h = 0.24
k = 0.5
r = 0.15
# Map my_raw_value to degrees. my_raw_value is between 0 and 300
theta = my_raw_value * 180 / 300
# and then into radians
theta = theta * math.pi / 180
x = h + r*math.cos(theta)
y = k + r*math.sin(theta)
path = 'M 0.235 0.5 L ' + str(x) + ' ' + str(y) + ' L 0.245 0.5 Z'

这将为您的形状动态生成三角形路径，并大致将表盘的长边设置在该位置.理想情况下，我们希望旋转整个对象，因为在此实现中，三角形的基数保持不变，从而在图形的边界上形成一条直线. 您需要将路径上的所有三个点乘以旋转矩阵，以获取准确的坐标.

This will dynamically generate the triangle path for your shape and roughly set the long edge of the dial where it is supposed to be. Ideally we would want to rotate the whole thing, since in this implementation the base of the triangle stays static, resulting in a straight line on the limits of the graph. You would need to multiply all three points on the path by a rotation matrix to get the exact coordinates.

这篇关于如何在量表中旋转刻度盘?精巧地使用python的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！