chart.js로 구현한 라인 차트에서 최근 데이터 값 y축에 표시하는 방법

Question

안녕하세요. 웹 개발 초보자 입니다.지금 javascript &#43; chart.js 를 사용해서 웹 상에 대량의 데이터를 차트로 구현 중 인데요.chart.js를 사용하여 라인 차트를 구현했을 때 현재 표시되는 x축의 범위 중 가장 최근 x에 해당하는 y 값을 y축에 표시할 수 있는지 궁금합니다. (아래 예시 차트에서 y축 레이블에 56,200 으로 표시된 부분 처럼)chart.js 에서 해당 기능을 제공하고 있다면 어떤 옵션이나 플러그인으로 가능한 것인지 키워드 만이라도 알려주시면 감사하겠습니다.chart.js에서는 구현이 힘들다면 구현 가능한 다른 차트 라이브러리를 알려주셔도 좋습니다.좋은 하루 되세요. ^^

하태연 · Accepted Answer

options: { responsive: true, scales: { y: { min: 100, max: 200, ticks: { callback: function (value, index, ticks) { if (value === data[data.length - 1]) { return `[${value}]`; } return value; }, render: "html", stepSize: 20, }, afterBuildTicks: (scale) => { // console.log("afterBuildTicks"); // console.log(scale); const addTick = { value: data[data.length - 1], }; scale.ticks.push(addTick); }, }, }, },

kkang01 · Answer

https://www.chartjs.org/chartjs-plugin-zoom/latest/

하태연 · Answer

제가 샘플로 몇 개 구현한 게 있는데 되는지 보고 답 드리겠습니다. 보통 마우스로 해당 데이터에 올리면 값이 나오는 게 일반적이라 그 디테일까진 신경 안 쓰거든요.

풍월상신(가니메디안) · Answer

Vizzu 라고 리액트 플러그인이 있어요.https://lib.vizzuhq.com/latest/showcases/

하태연 · Answer

추가로 이런 식으로 하면 색상이랑 폰트는 적용되네요.백그라운드 넣는 건 힘들어 보입니다. ㅎㅎticks: { color: (c) => { // console.log(c); if (c.type === "tick") { if (c.tick.value === data[data.length - 1]) { return "blue"; } } }, font: (c) => { if (c.type === "tick") { if (c.tick.value === data[data.length - 1]) { return { weight: "bold", }; } } }, stepSize: 20, // callback 제거하고 플러그인으로 처리 display: true, },

chart.js로 구현한 라인 차트에서 최근 데이터 값 y축에 표시하는 방법

5개의 답변

#web 목록