此图是否可以使用 chart.js？

Question

我不知道这个图叫什么，但是可以用 Chart.js 来做吗？

Answer 1

我认为这不符合 chart.js

的标准

我为另一个带圆圈的图表做了一个简短的片段。您可以以此为基础来解决您的问题。例程来自以下link.

How to calculate the SVG Path for an arc (of a circle)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>svgPercent</title>
</head>
<body>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <path id="arc1" fill="none" stroke="#ddd" stroke-width="20" stroke-linecap="round"/>
        <path id="arc2" fill="none" stroke="#00f" stroke-width="20" stroke-linecap="round"/>
    <text x="50%" y="40%"
        font-family="Arial"
        font-weight="bold"
        font-size="50"
        alignment-baseline="middle" text-anchor="middle">75</text> 
    <text x="50%" y="60%"
        font-family="Arial"
        font-weight="bold"
        font-size="16"
        alignment-baseline="middle" text-anchor="middle">73 (+2%)</text> 
    <line x1="100" y1="150" x2="100" y2="180" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/>  
        <line x1="100" y1="150" x2="105" y2="155" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/> 
       <line x1="100" y1="150" x2="95" y2="155" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/> 
  </svg>
  <script>
  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}
document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 90, 210, 510));
document.getElementById("arc2").setAttribute("d", describeArc(100, 100, 90, 210, 360));
  </script>
</body>
</html>

此图是否可以使用 chart.js？

Is this graph possible using chart.js?

javascript

chart.js

chart.js2