1. 首頁
  2. 問答
  3. 該圖可能使用chart.js？

該圖可能使用chart.js？

2017-05-31 73 views

回答

0

我覺得that's不chart.js之標準

我做了一個小片段爲其他圓圈圖。你可以把它作爲解決你的問題的基礎。例程來自follwing鏈接。

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"/> \t \t 
 
     <line x1="100" y1="150" x2="105" y2="155" style="stroke:rgb(255,0,0); 
 
       stroke-width:5" stroke-linecap="round"/> \t 
 
     <line x1="100" y1="150" x2="95" y2="155" style="stroke:rgb(255,0,0); 
 
       stroke-width:5" stroke-linecap="round"/> \t 
 
    </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>

來源

2017-05-31 06:08:21

+0

問這些東西是的，我認爲現在不可能使用ChartJS。但感謝您的實施。 –

相關問題

 相關問題