ドーナツグラフ

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Chart.js TEST</title>
  <meta charset="UTF-8">
</head>
<style>
  * { box-sizing: border-box }
  li { list-style-type: none }
  li:before {
    content: "";
    display: inline-block;
    height: 13px;
    width: 13px;
    margin-right: 5px;
    border-radius: 3px;
  }
  li.sm:before {
    background: #9bcad0;
  }
  li.pc:before {
    background: #d5a87f;
  }
  li.tab:before {
    background: #cca9ca;
  }
  li.etc:before {
    background: #edef9c;
  }
</style>
<body>
  <h1>ドーナツグラフ(Chart.js)</h1>

  <div style="width: 30%;float: left">
    <canvas id="doughnut-chart" height="450" width="600"></canvas>
  </div>
  <div style="width: 70%;float: right;padding: 50px">
    <ul style="width: 200px;padding: 20px;box-shadow: 1px 1px 4px 1px #ccc">
      <li class="sm">スマートフォン</li>
      <li class="pc">PC</li>
      <li class="tab">タブレット</li>
      <li class="etc">その他デバイス</li>
    </ul>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <!-- もしくは<script src="Chart.js"></script> -->
  <script>
  var doughnutData = [
      {
        value: 500,
        color:"#9bcad0",
        highlight: "#a7d7de",
        label: "スマートフォン"
      },
      {
        value: 150,
        color: "#d5a87f",
        highlight: "#e4b68a",
        label: "PC"
      },
      {
        value: 80,
        color: "#cca9ca",
        highlight: "#dcb7da",
        label: "タブレット"
      },
      {
        value: 20,
        color: "#edef9c",
        highlight: "#fcfea6",
        label: "その他デバイス"
      }
    ];
    window.onload = function(){
      var ctx = document.getElementById("doughnut-chart").getContext("2d");
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
        responsive : true
      });
    }

  </script>
</body>
</html>