如何使用 Plotly Javascript 显示循环进度图

Posted 2023-02-18

【中文标题】如何使用 Plotly Javascript 显示循环进度图

【英文标题】：How show a circular progress chart with Plotly Javascript

【发布时间】：2022-01-12 13:21:37

【问题描述】：

我是使用 Plotly 库的新手，这次我发现自己需要在 Vuejs 2 中显示一个类似于以下的循环进度图。

我知道 plotly 非常完整，但我还没有看到具有类似方面的示例，这也是使用 javascript。

提前感谢您提供的任何信息或帮助。

您好！

使用 plotly Derek Example，图表看起来像这样

我的英文不是很好，但是注意圆的线没有平滑的曲率。

【问题讨论】：

我认为plotly.js 中不存在这样的图表：您需要使用形状和注释自己构建它。如果您有兴趣，我可以创建一个示例来复制您的图表

【参考方案1】：

您可以使用 plotly.js 跟踪和文本来重新创建此图表的组件。如果您使用散布来放置一组标记，您可以创建灰色弧线，然后将红色弧线放在它上面。要计算每个这些标记的坐标，您可以将坐标轴置于 (0,0) 的中心，然后使用 x=r*cos(theta) 和 y=r*sin(theta) 其中 theta 是您的角度（以弧度为单位）。你可以得到一个 x 和 y 值的数组来追踪红色和灰色弧线的所需部分。

为了让圆形图表看起来像你的，我将 x 轴和 y 轴的范围都设置为[-2,2]，以[0,0] 为中心，使圆弧的半径为 0.9，设置这些弧线的标记为 10，并使灰色弧线从 210 度变为 85 度，红色弧线从 90 度变为 -200 度（使用 mhodges 在他的回答 here 中编写的函数 makeArr）。然后为了让绿色标记显示在图例中，我创建了一个带有绿色标记但具有空值的跟踪，因此它不会在图表上绘制任何内容。文本跟踪可用于在圆弧中心周围添加文本。

这是一个例子（codepen 是here）：

// credit goes to mhodges: https://***.com/a/40475362/5327068
function makeArr(startValue, stopValue, cardinality) 
  var arr = [];
  var step = (stopValue - startValue) / (cardinality - 1);
  for (var i = 0; i < cardinality; i++) 
    arr.push(startValue + (step * i));
  
  return arr;


// The function returns two arrays of circle coordinates
// for the outer points of a circle centered at some (x,y)
// and with a radius r with an arc of theta values
function getCircleCoords(r, center, degree_values) 
  var center_x=center[0]
  var center_y=center[1]
  var x_coords = []
  var y_coords = []
  for (var i = 0; i < degree_values.length; i++) 
    x_coords.push(center_x + (r * Math.cos(degree_values[i]*Math.PI/180)));
    y_coords.push(center_y + (r * Math.sin(degree_values[i]*Math.PI/180)));
  
  return [x_coords,y_coords]


var trace1 = 
  x: [0],
  y: [0.15],
  text: ['1000'],
  mode: 'text',
  textfont: 
    family: 'arial',
    size: 28,
    color: 'black'
  ,
  showlegend: false
;

var trace2 = 
  x: [0],
  y: [-0.15],
  text: ['kW/kg'],
  mode: 'text',
  textfont: 
    family: 'arial',
    size: 22,
    color: 'grey'
  ,
  showlegend: false
;

circleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(90,-200,1000))
backgroundCircleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(210,85,1000))

// display a marker in the legend without plotting it
var trace3 = 
  x: [null],
  y: [null],
  mode: 'markers',
  marker: color: 'green', size: 10,
  name: 'Correcto funcionamiento'
;

// grey background circle
var trace4 = 
  x: backgroundCircleCoords[0],
  y: backgroundCircleCoords[1],
  mode: 'markers',
  marker: color: '#eeeeee', size: 10,
  name: null,
  showlegend: false
;

// red foreground circle
var trace5 = 
  x: circleCoords[0],
  y: circleCoords[1],
  mode: 'markers',
  marker: color: 'red', size: 10,
  name: 'Funcionamiento erroneo'
;

var layout = 
  title:'Relacíon potencia peso',
  xaxis: 
    range: [-2, 2],
    zeroline: false,
    showgrid: false,
    zeroline: false,
    showline: false,
    showticklabels: false
  ,
  yaxis: 
    range: [-2, 2],
    showgrid: false,
    zeroline: false,
    showline: false,
    showticklabels: false
  ,
  width: 600,
  height: 600,
  legend: 
    x: 0,
    y: 0,
    "orientation": "h"
  
;

var data = [trace1, trace2, trace3, trace4, trace5];
Plotly.newPlot('myDiv', data, layout);

编辑：对于更平滑的圆，您可以增加用于绘制圆的标记数。

circleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(90,-200,5000))
backgroundCircleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(210,85,5000))

【讨论】：

谢谢！它已经奏效了，我唯一想要的就是让圆圈更统一一点，它看起来像一个非常方形的方法，但它显示了我需要的东西。

我有点困惑你的意思是你想让圆圈更统一 - 如果你能进一步解释一下，我很乐意更新我的答案。现在，如果我的回答有帮助，请考虑accepting it - 谢谢！

你好，Derek，我的意思是，在执行你指出的代码之后，圆圈的线看起来有点方，你明白我的意思吗？我的英文不是很好。我想要的是圆圈的线是“平滑的”或者不是方形的呵呵

@LuisG.LunaB。当你说“圆圈的线看起来有点方”时，我很难理解你的意思。您能否更新问题中的图像以显示所需的图表？这可以帮助解决问题

嗨，德里克，你好吗？我已经用 plotly 图表中的图像更新了我的帖子