chart 관련 질문드립니다.
관련링크
http://chart
2회 연결
본문
아래와 같은 차트를 구현하기위해 .. Echart 나 chart.js 를 활용하려고 했거든요! ...
근데 잘 안되더라구요..ㅎ;;
Echart 나 chart.js 를 활용 하여 아래 와 같은 차트를 만들 수 있을까요..ㅜㅜㅜ
아니면 다른 무료 chart 로도 가능하다면 어떻게 구현해야하는지 알고 계신다면 답변 부탁드리겠습니다.ㅠㅠ
현재 저 group_1 ~ group4 를 구현하기가 너무 어렵네여 휴 .;;;
답변 2
정확하게 하시려는게 있어야 다른 분들도 원활한 답변이 될 것 같습니다.
어떻게 구현은 샘플이 있으니 그대로 쓰면 됩니다.
어떠한 데이터를 어떤 차트를 어떻게 출력하고 싶다가 되어야 좀 더 구체적인 답변을 달지 않을까?생각됩니다.
chatjs 에 올라온 샘플만으로도 뭐든 다 가능하니깐요
데이터는 중요치 않으며 어떤 차타를 어떻게 출력하고 싶다는 사진과 같이 전달이 된거같은데
사진으로는 좀 어려우실까요!?
X 축 라인에 레이블을 두개를 두고싶은데 잘 구현이 안되서요 ㅠㅠ
<!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>
답변을 작성하시기 전에 로그인 해주세요.