svg + html + css による棒グラフ - end0tknr's kipple

html + css で簡単な棒グラフ - end0tknr's kipple - web写経開発

上記 entry のように以前は、css の border-width で棒グラフを描いていましたが、

今回は、svg な画像を用意し、その上で cssの background-～でグラフ化。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4">
  <line x1="0" y1="2" x2="4" y2="2" stroke-width="4" stroke="#00F" />
</svg>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <style>
    table { border-collapse:collapse; }
    tr    { border-bottom: 1px #000 solid ; }
    td    { padding:8px 4px; vertical-align:middle; }
    #graph {
        background-image:url("/pri/img/graph_bar_blue.svg");
        background-position: 0% 90%;
        background-repeat: no-repeat;
    }
  </style>
</head>
<body>

      <table>
        <tbody>
          <tr>
            <td>小倉</td>
            <td id="graph" style="background-size: 20px 4px;">999,999</td>

            <td>+999</td><td>999,999</td><td>-999</td>
          </tr>
        </tbody>
      </table>

</body>
</html>