Chart.js에서 스트립 그래프(100% 스택 막대 그래프) 그리기

4231 단어 chart.js자바스크립트
JavaScript의 그래프 그리기 라이브러리인 Chart.js(v2.5.0)에서는 띠 그래프(100% 누적 막대 그래프)를 그릴 수 없습니다. 순수한 스택 막대 그래프는 옵션으로 지정할 수 있지만 비율을 그래프로 만들고 싶었습니다.
다행히도 Chart.js는 plugin을 쉽게 작성할 수 있기 때문에 만들었습니다. 다음과 같습니다.



설정



여기에 작성되었으므로 먼저 플러그인을 Chart.js에 등록하십시오.

사용법



chart options에 { stacked: '100%' }를 전달하면됩니다.
new Chart(document.getElementById('stage'), {
  type: 'horizontalBar',
  data: {
    labels: ["Foo", "Bar"],
    datasets: [
      { label: "bad",    data: [5, 25],  backgroundColor: "rgba(244, 143, 177, 0.6)" },
      { label: "better", data: [15, 10], backgroundColor: "rgba(255, 235, 59, 0.6)" },
      { label: "good",   data: [10, 8],  backgroundColor: "rgba(100, 181, 246, 0.6)" }
    ]
  },
  options: { stacked: "100%" }
});

주의점 등


  • 백분율은 소수 2위를 반올림하여 소수 1위까지로 하고 있습니다. 그 때문에, 모두 더해도 100%가 되지 않는 경우가 있습니다. 다만 x축은 max100으로 하고 있으므로, 그 편은 괜찮습니다. (다소 튀어 나올 수도 있지만 오차 수준일까요)
  • 다음 옵션은 플러그인 내에서 덮어쓰고 있습니다.
  • options.scales.xAxes[].stacked, options.scales.yAxes[].stacked
  • options.scales.xAxes[].ticks.min, options.scales.xAxes[].ticks.max
  • options.tooltips.callbacks.label

  • 툴팁은 백분율과 괄호 안에 원래 숫자를 표시합니다.
    • Chart.js (ver 2)에서 값 뒤에 단위 (% 등)를 표시하는 방법
    jQuery와 Chart.js로 막대 그래프 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage