on
[ Chart.js ] javascript 를 이용하여 2가지의 차트를 한 canvas에 그려...
[ Chart.js ] javascript 를 이용하여 2가지의 차트를 한 canvas에 그려...
728x90
반응형
javascript 기반의 Chart.js를 이용하여 한 캔버스(canvas)내에 2개 이상의 그래프를 그리려고 한다.
꺾은선(line)과, 바(bar) 두 가지 형태이다.
데이터는 axios를 이용하여 json 형태로 받아왔다.
결과 화면
음... 대충 아래와 같긴 한데,, 보기가 너무 불편하고 그러니, 요점만 작성하도록 하겠다.
■ 1. 데이터를 이루는 부분
■ 2. chart.js 호출
이렇게 호출 시, canvas 가 동작한다.
.then(function(response) {
labelsAndDatas(responseData1, response.data)
})
function labelsAndDatas (responseData1, responseData2) {
let labels = []
let labelValues = []
let labels2 = []
let labelValues2 = []
console.log(responseData1)
for(i=0; i
labels.unshift(responseData1[i].day.substr(5))
labelValues.unshift(responseData1[i].day_total)
}
console.log(labels)
console.log(labelValues)
for(i=0; i
labels2.push(responseData2[i].day.substr(5))
labelValues2.push(responseData2[i].day_total)
}
console.log(labels2)
console.log(labelValues2)
drawChart (labels, labelValues, labelValues2) // 호출
}
function drawChart (labels, labelValues, labelValues2) {
let data = {
labels: labels,
datasets: [
{
type: 'line',
yAxesID: 't',
label: '일자별 생산량',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data : labelValues
},
{
type: 'bar',
label: '일자별 출하량',
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data : labelValues2
}
]}
const generalWithExposeListConfig = {
data: data,
options: {}
}
const generalWithExposeList = new Chart(
document.getElementById('generalWithExposeList'),
generalWithExposeListConfig
);
}function labelsAndDatas (responseData1, responseData2) {
let labels = []
let labelValues = []
let labels2 = []
let labelValues2 = []
console.log(responseData1)
for(i=0; i
labels.unshift(responseData1[i].day.substr(5))
labelValues.unshift(responseData1[i].day_total)
}
console.log(labels)
console.log(labelValues)
for(i=0; i
labels2.push(responseData2[i].day.substr(5))
labelValues2.push(responseData2[i].day_total)
}
console.log(labels2)
console.log(labelValues2)
drawChart (labels, labelValues, labelValues2) // 호출
}
function drawChart (labels, labelValues, labelValues2) {
let data = {
labels: labels,
datasets: [
{
type: 'line',
yAxesID: 't',
label: '일자별 생산량',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data : labelValues
},
{
type: 'bar',
label: '일자별 출하량',
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data : labelValues2
}
]}
const generalWithExposeListConfig = {
data: data,
options: {}
}
const generalWithExposeList = new Chart(
document.getElementById('generalWithExposeList'),
generalWithExposeListConfig
);
}
chart.js는 이쁘다..ㅎㅎ
728x90
반응형
from http://code-hoon.tistory.com/138 by ccl(A) rewrite - 2021-11-30 20:28:07