该图可能使用chart.js？

-3

我不知道这个图表被调用，但它可以使用Chart.js吗？该图可能使用chart.js？

来源

2017-05-31 JJ Adonis

您遇到了多张系列呢？ – shv22

你可以在论坛http://www.jscharts.com/forum/list.php?2 – shv22

我觉得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

问这些东西是的，我认为现在不可能使用ChartJS。但感谢您的实施。 –

该图可能使用chart.js？

回答

相关问题