Question

没有任何外部链接我想使用像图表这样的百分比绘制圆圈像这个条形图

$val="46%"; echo "
<table width=100% border=0.1>
    <tr>
        <td>
            <table height=1 3 width=$val% border=0 bgcolor=red>
                <tr>
                    <td align=right><font size=1><b>$val</b></td>
</tr></table>
</td></tr></table>";

$val="73%";
echo "<table width=100% border=0.1><tr><td>
<table height = 13 width=$val% border=0 bgcolor=red><tr>
<td align=right><font size=1><b>$val</b></td>
</tr></table>
</td></tr></table>";

Answer 1

＆＃13;

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="chart1" width="578" height="200"></canvas>
    <canvas id="chart2" width="578" height="200"></canvas>
    <script>
      var chart1 = document.getElementById('chart1');
      var context = chart1.getContext('2d');
      var centerX = chart1.width / 2;
      var centerY = chart1.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#333333';
      context.stroke();
      
      context.beginPath();
      context.moveTo(centerX, centerY);
      context.arc(centerX, centerY, radius, 0, (2 * .46) * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
  
      context.font = "30px Arial";      
      context.textAlign = 'center';
      context.textBaseline = 'middle'; 
      context.fillStyle = 'black';
      context.fillText("46%",centerX, centerY);
      
      var chart2 = document.getElementById('chart2');
      context = chart2.getContext('2d');
      centerX = chart2.width / 2;
      centerY = chart2.height / 2;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#333333';
      context.stroke();
      
      context.beginPath();
      context.moveTo(centerX, centerY);
      context.arc(centerX, centerY, radius, 0, (2 * .73) * Math.PI, false);
      context.fillStyle = 'blue';
      context.fill();
      
    </script>
  </body>
</html>

＆＃13;

使用图表等百分比绘制一个简单的圆圈？

1 个答案: