분류 javascript

chart.xkcd - xkcd 스타일 차트 lib

컨텐츠 정보

  • 조회 173 (작성일 )

본문

Chart.xkcd는 "스케치", "만화"또는 "손으로 그린"스타일 차트로 구성된 차트 라이브러리입니다.


chart.xkcd를 쉽게 시작할 수 있습니다. 차트를 렌더링 하려면 단일 <svg> 노드와 함께 페이지에 포함 된 스크립트 만 있으면 됩니다.


https://github.com/timqian/chart.xkcd 

https://timqian.com/chart.xkcd/


20190819131226.gif 


<svg class="line-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.line-chart')

  new chartXkcd.Line(svg, {
    title: 'Monthly income of an indie developer',
    xLabel: 'Month',
    yLabel: '$ Dollors',
    data: {
      labels:['1', '2', '3', '4', '5', '6','7', '8', '9', '10'],
      datasets: [{
        label: 'Plan',
        data: [30, 70, 200, 300, 500 ,800, 1500, 2900, 5000, 8000],
      }, {
        label: 'Reality',
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
      }]
    },
  });
</script>