개요

JavaScript로 예쁜 차트를 그릴 수 있는 「 Chart.js 」
파이와 도넛 형식으로 표현할 수있어 편리합니다.
단위(%)를 붙이는데 시간이 걸렸으므로 대응 방법을 남겨 둡니다.

쓰기 시점의 Chart.js 버전은 2.4.0입니다.
1.x 와는 쓰는 방법이 다르므로 주의해 주세요.
(1.x라고 간단하게 쓰는 방법이 있습니다.반대로 그것이 이번 빠진 원인이거나..)

곤란한 일

본가 Documentation 도, 그 외의 해설 사이트도 왼쪽 그림의 패턴으로,
내가 원했던 오른쪽 그림의 패턴이 왠지 실려 있지 않았습니다.



버전 1.x의 경우 쉽게 할 수있는 방법이 있으므로 2.x도 비슷한 방법이있을 것입니다.
옵션 (afterLabel 등)을 계속 찾고있었습니다.

하지만 결국 요구 사항을 충족하지 못했습니다.
덧붙여서 afterLabel 는 이렇게 됩니다. 어째서!

버전 2.x에서 단위를 지정하려면 어떻게 해야 합니까?

그 중 더 좋은 방법이 구현될 것 같지만,
현재는 callbacks를 사용하여 단위(%)를 붙일 수 있습니다.
( 출처 를 보면 현상 기능이 없는 것은 일목요연했습니다)

값을 비율(합계 100)으로 표기하는 것도, 자동으로 해 주는 기능은 없기 때문에
비율로 다시 계산한 값을 사용합니다.

오른쪽 단위로 차트 .html

<canvas id="myChart" width="400" height="400"></canvas>
<script>
  var chart = new Chart(document.getElementById("myChart"),
  {
    type: "doughnut",
    data: {
      labels: ["Red", "Blue", "Yellow"],
      datasets: [
        {
          label: "Favorite color",
          data: [70, 10, 20], //データ自体を調整して合計100になるようにする
          backgroundColor: [
            'rgba(255, 99, 132, 0.8)',
            'rgba(54, 162, 235, 0.8)',
            'rgba(255, 206, 86, 0.8)'
          ]
        }
      ]
    },
    options: {
      tooltips: {
        callbacks: {
          label: function (tooltipItem, data) {
            return data.labels[tooltipItem.index]
              + ": "
              + data.datasets[0].data[tooltipItem.index]
              + " %"; //ここで単位を付けます
          }
        }
      }
    }
  });
</script>