티스토리에서 그래프 그리는 방법

 

 

티스토리에서 그래프 그리는 방법에 대해 알아보겠습니다.

 

예시 1)  도넛 차트

예시 2) 라인차트

1. charjs 라이브러리 임포트 선언

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

위에 코드를 html 모드로 변경 후 아무곳에 넣으면 됩니다. 저는 맨 윗부분에 넣었습니다.

 

2. canvas 태그 and script 입력

<canvas id="doughnutChart"></canvas>
<script>
var ctx = document.getElementById('doughnutChart').getContext('2d');
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)'
            ]
        }]
    }
});
</script>

원하는 부분에 html 모드에서 붙여넣어줍니다. <canvas id="doughnutChart"></canvas>   이 부분이 티스토리 글쓰다 보면 자주 날아가니 다시 한번 확인해줍니다. 위에 붙여넣고 비공개 발행을 하시면 해당 계시물에 차트가 있을것입니다. 티스토리에서 그래프 그리는 방법에 대해 알아보았습니다.