您可以使用plotly.js跟踪和文本重新创建此图表的组件。如果使用散点图放置一个标记数组，则可以创建灰色弧线，然后将红色弧线放在其上。要计算每个标记的坐标，可以将坐标轴居中于（0，0），然后使用x=r*cos(theta)和y=r*sin(theta)，其中theta是以弧度表示的Angular ，你可以得到一个包含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://stackoverflow.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))