chartJs를 사용하는데 x축에 대한 궁금증!
-
게시물 수정 , 삭제는 로그인 필요
데이터가 하나씩 추가되면서 x축도 하나씩 추가되는데 저는 일정 범위가 되면 값도 x축도 계속 추가는 되지만
드래그해서 보고싶어요
사진을 예로들면 1~30까지 값이 들어간 후에
31부터는 2~32, 3~33이런식으로 값이 가려져서 보여지지만
마우스로 좌우를 움직여서 가려진 1까지의 값을 볼 수 있게 하고 싶어요.
// Line Chart Configuration
const lineConfig = {
type: 'line',
data: {
labels: [], // 라벨은 동적으로 설정될 것이므로 비워둠
datasets: [{
label: 'Line Dataset',
data: [],
fill: false,
borderColor: 'rgb(75, 192, 192)',
}]
},
options: {
animation: {
duration: 0
},
scales:{
x:{
type :'linear',
position:'bottom',
ticks: {
stepSize: 1
},
title: {
display: true,
text: 'X-Axis'
},
bounds: 'data', // x축이 데이터에 맞춰 스크롤 가능하도록 설정
min: 1, // x축의 최소값 설정
max: 30 // x축의 최대값 설정
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
wheel: {
enabled: true
},
pinch: {
enabled: true
},
mode: 'x'
}
}
}
}
}; 현재 코드가 이런식으로 작성되어져 있는데 어떻게 해야할지 모르겠습니다.
x축도 하나씩 추가되는데 저는 일정 범위가 되면 값도 x축도 계속 추가는 되지만
드래그해서 보고싶어요
사진을 예로들면 1~30까지 값이 들어간 후에
31부터는 2~32, 3~33이런식으로 값이 가려져서 보여지지만
마우스로 좌우를 움직여서 가려진 1까지의 값을 볼 수 있게 하고 싶어요.
// Line Chart Configuration
const lineConfig = {
type: 'line',
data: {
labels: [], // 라벨은 동적으로 설정될 것이므로 비워둠
datasets: [{
label: 'Line Dataset',
data: [],
fill: false,
borderColor: 'rgb(75, 192, 192)',
}]
},
options: {
animation: {
duration: 0
},
scales:{
x:{
type :'linear',
position:'bottom',
ticks: {
stepSize: 1
},
title: {
display: true,
text: 'X-Axis'
},
bounds: 'data', // x축이 데이터에 맞춰 스크롤 가능하도록 설정
min: 1, // x축의 최소값 설정
max: 30 // x축의 최대값 설정
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
wheel: {
enabled: true
},
pinch: {
enabled: true
},
mode: 'x'
}
}
}
}
}; 현재 코드가 이런식으로 작성되어져 있는데 어떻게 해야할지 모르겠습니다.
