chart 관련 질문드립니다.
수엑
1년 전
조회 3,491
아래와 같은 차트를 구현하기위해 .. Echart 나 chart.js 를 활용하려고 했거든요! ...
근데 잘 안되더라구요..ㅎ;;
Echart 나 chart.js 를 활용 하여 아래 와 같은 차트를 만들 수 있을까요..ㅜㅜㅜ
아니면 다른 무료 chart 로도 가능하다면 어떻게 구현해야하는지 알고 계신다면 답변 부탁드리겠습니다.ㅠㅠ
현재 저 group_1 ~ group4 를 구현하기가 너무 어렵네여 휴 .;;;
http://sir.kr/data/editor/2410/838783876_1729472568.4533.png" width="100%" />
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
1년 전
</p>
<p><!DOCTYPE html></p>
<p><html></p>
<p> <head></p>
<p> <meta charset="utf-8"></p>
<p> <script src="<a href="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script></a></p>
<p> </head></p>
<p> </p>
<p> <body></p>
<p> <canvas id="myChart"></canvas></p>
<p> </p>
<p> <script></p>
<p> const ctx = document.getElementById('myChart').getContext('2d');</p>
<p> </p>
<p> const data = {</p>
<p> labels: ['Group 1', 'Group 2', 'Group 3', 'Group 4'],</p>
<p> datasets: [</p>
<p> {</p>
<p> label: 'Dataset 1',</p>
<p> data: [10, 20, 30, 40, 50],</p>
<p> backgroundColor: 'rgba(255, 99, 132, 0.2)',</p>
<p> borderColor: 'rgba(255, 99, 132, 1)',</p>
<p> borderWidth: 1</p>
<p> },</p>
<p> {</p>
<p> label: 'Dataset 2',</p>
<p> data: [20, 40, 60, 80, 100],</p>
<p> backgroundColor: 'rgba(54, 162, 235, 0.2)',</p>
<p> borderColor: 'rgba(54, 162, 235, 1)',</p>
<p> borderWidth: 1</p>
<p> },</p>
<p> {</p>
<p> label: 'Dataset 3',</p>
<p> data: [30, 60, 90, 120, 150],</p>
<p> backgroundColor: 'rgba(255, 206, 86, 0.2)',</p>
<p> borderColor: 'rgba(255, 206, 86, 1)',</p>
<p> borderWidth: 1</p>
<p> },</p>
<p> {</p>
<p> label: 'Dataset 4',</p>
<p> data: [40, 80, 120, 160, 200],</p>
<p> backgroundColor: 'rgba(75, 192, 192, 0.2)',</p>
<p> borderColor: 'rgba(75, 192, 192, 1)',</p>
<p> borderWidth: 1</p>
<p> },</p>
<p> {</p>
<p> label: 'Dataset 5',</p>
<p> data: [50, 100, 150, 200, 250],</p>
<p> backgroundColor: 'rgba(153, 102, 255, 0.2)',</p>
<p> borderColor: 'rgba(153, 102, 255, 1)',</p>
<p> borderWidth: 1</p>
<p> }</p>
<p> ]</p>
<p> };</p>
<p> </p>
<p> const config = {</p>
<p> type: 'bar',</p>
<p> data: data,</p>
<p> options: {</p>
<p> scales: {</p>
<p> x: {</p>
<p> stacked: false</p>
<p> },</p>
<p> y: {</p>
<p> stacked: false</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> };</p>
<p> </p>
<p> const myChart = new Chart(ctx, config);</p>
<p> </script></p>
<p> </body></p>
<p></html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
사진으로는 좀 어려우실까요!?
X 축 라인에 레이블을 두개를 두고싶은데 잘 구현이 안되서요 ㅠㅠ