D3 Examples - Canvas

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    table{ table-layout: fiexed; margin: 20px auto;}
  </style>
</head>
​
<p>Author: Michael Cheng | E-mail: cxhair@163.com</p>
<p>This is table contains many canvas charts which created without any framworks.</p>
​
<body>
  <table>
    <tbody>
        <tr>
            <td class="ratio" data="0.35"></td>
            <td class="ratio" data="0.7"></td>
            <td class="ratio" data="0.65"></td>
            <td class="ratio" data="0.57"></td>
        </tr>
        <tr>
            <td class="ratio" data="0.35"></td>
            <td class="ratio" data="0.95"></td>
            <td class="ratio" data="0.78"></td>
            <td class="ratio" data="0.65"></td>
        </tr>
        <tr>
            <td class="ratio" data="0.69"></td>
            <td class="ratio" data="0.78"></td>
            <td class="ratio" data="0.75"></td>
            <td class="ratio" data="0.12"></td>
        </tr>
    </tbody>
</table>
  
  
  
  <script>
    
function pie(ratio, size){
    var canvas = document.createElement("canvas");
    canvas.setAttribute("width", size);
    canvas.setAttribute("height", size);
    
    var x = size / 2,
        y = size / 2,
        radius =  size / 2,
        startAngle = -Math.PI * 0.5,
        endAngle = ratio * Math.PI * 2 - Math.PI * 0.5;
    
    this.appendChild(canvas);
    
    var context = canvas.getContext("2d");
    
    context.strokeStyle = "transparent";
    
    context.fillStyle = "lightblue";
    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI * 2);
    context.fill();
    context.stroke();
    
    context.fillStyle = "tomato";
    context.beginPath();
    context.moveTo(x, y);
    context.arc(x, y, radius, startAngle, endAngle);
    context.closePath();
    context.fill();
    
    context.fillStyle = "black";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText((ratio * 100).toFixed(1) + "%", x, y);
}
​
​
​
var ratioCells = document.querySelectorAll(".ratio");
ratioCells.forEach(function(cell){
    var ratio = +cell.getAttribute("data");
    pie.call(cell, ratio, 50);
});
​
  </script>
</body>
​
    