chart 관련 질문드립니다.

chart 관련 질문드립니다.

QA

chart 관련 질문드립니다.

본문

아래와 같은 차트를 구현하기위해 .. Echart 나 chart.js 를 활용하려고 했거든요! ...

근데 잘 안되더라구요..ㅎ;;

Echart 나 chart.js 를 활용 하여 아래 와 같은 차트를 만들 수 있을까요..ㅜㅜㅜ

아니면 다른 무료 chart 로도 가능하다면 어떻게 구현해야하는지 알고 계신다면 답변 부탁드리겠습니다.ㅠㅠ

현재 저 group_1 ~ group4 를 구현하기가 너무 어렵네여 휴 .;;;

838783876_1729472568.4533.png

 

이 질문에 댓글 쓰기 :

답변 2

정확하게 하시려는게 있어야 다른 분들도 원활한 답변이 될 것 같습니다.

어떻게 구현은 샘플이 있으니 그대로 쓰면 됩니다.

 

어떠한 데이터를 어떤 차트를 어떻게 출력하고 싶다가 되어야 좀 더 구체적인 답변을 달지 않을까?생각됩니다.

chatjs 에 올라온 샘플만으로도 뭐든 다 가능하니깐요


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
  </head>
 
  <body>
    <canvas id="myChart"></canvas>
 
    <script>
      const ctx = document.getElementById('myChart').getContext('2d');
 
      const data = {
        labels: ['Group 1', 'Group 2', 'Group 3', 'Group 4'],
        datasets: [
          {
            label: 'Dataset 1',
            data: [10, 20, 30, 40, 50],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
          },
          {
            label: 'Dataset 2',
            data: [20, 40, 60, 80, 100],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          },
          {
            label: 'Dataset 3',
            data: [30, 60, 90, 120, 150],
            backgroundColor: 'rgba(255, 206, 86, 0.2)',
            borderColor: 'rgba(255, 206, 86, 1)',
            borderWidth: 1
          },
          {
            label: 'Dataset 4',
            data: [40, 80, 120, 160, 200],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
          },
          {
            label: 'Dataset 5',
            data: [50, 100, 150, 200, 250],
            backgroundColor: 'rgba(153, 102, 255, 0.2)',
            borderColor: 'rgba(153, 102, 255, 1)',
            borderWidth: 1
          }
        ]
      };
 
      const config = {
        type: 'bar',
        data: data,
        options: {
          scales: {
            x: {
              stacked: false
            },
            y: {
              stacked: false
            }
          }
        }
      };
 
      const myChart = new Chart(ctx, config);
    </script>
  </body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT