혹시 Chart.js 를 능숙하게 사용하시는 분이 계실까요?

Question

안녕하세요.상당히 독특한 그래프를 그리고자 Chart.js 3.7.0 버전을 이용해서 다음과 같이 그래프를 구현했습니다. 위 그래프에서 Y 축에 해당하는 선 중 0, 25, 50, 75, 100 에 해당하는 값의 경우 일반 선(Solid) 형태로 변경하고 싶은데 Chart.js 문서를 살펴봐도 function 형태나 callback() 을 사용할 수 없는 것 같습니다.혹시 Chart.js 를 사용해보신 분이 있으면 조언 부탁드립니다. 어떻게 수정을 해야 될지 감이 오질 않습니다.. 위 그래프를 그리기 위한 코드는 다음과 같습니다. const chartAreaBorder &#61; { id : 'chartAreaBorder', beforeDraw(chart, args, options) { const { ctx, chartArea : { left, top, width, height }} &#61; chart; ctx.save(); ctx.strokeStyle &#61; options.borderColor; ctx.lineWidth &#61; options.borderWidth; ctx.setLineDash(options.borderDash || []); ctx.lineDashOffset &#61; options.borderDashOffset; ctx.strokeRect(left, top, width, height); ctx.restore(); } }; const myChart &#61; new Chart(context, { type: 'bar', data: { labels: ['', '0', '50', '75', '100', '125', '150', '175', '200', '230', ''], datasets: [{ label: '', barPercentage : 0.05, data: [0, 80, 19, 3, 5, 2, 3, 30, 20, 30, 0], backgroundColor: [ 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)' ], borderColor: [ 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)', 'rgba(241, 246, 0, 1)' ], borderWidth: 0.1 },{ type : 'bubble', data : [ { x : 0, y : 0, r : 0 }, { x : 0, y : 80, r : 50 }, { x : 0, y : 19, r : 20 }, { x : 0, y : 3, r : 1 }, { x : 0, y : 5, r : 20 }, { x : 0, y : 2, r : 5 }, { x : 0, y : 3, r : 5 }, { x : 0, y : 30, r : 20 }, { x : 0, y : 20, r : 20 }, { x : 0, y : 30, r : 42 }, { x : 0, y : 0, r : 0 } ], backgroundColor: 'rgba(148, 181, 115, 0.7)', borderColor : 'rgba(228, 248, 188, 0.92)' }] }, options: { maintainAspectRatio : false, responsive : false, plugins : { legend : { display : false }, chartAreaBorder: { borderColor: 'rgba(255, 255, 255, 0.2)', borderWidth: 2 } }, scales: { x : { display : false, max : 110, min : 0, ticks : { stepStze : 10, callback : () &#61;> ('') }, grid : { drawTicks : false, color : 'rgba(255, 255, 255, 0.2)', borderWidth : 2 } }, y : { max : 100, min : 0, ticks : { stepSize : 5, callback : () &#61;> ('') }, grid : { drawTicks: false, drawBorder : true, color : 'rgba(255, 255, 255, 0.2)', borderDash : [1, 5], borderDashOffset : 2, borderWidth : 2 } } }, interaction : { mode : 'index', }, }, plugins: [chartAreaBorder] }); 감사합니다 :D.

킁킁탐정 · Answer

Chartjs를 사용하지는 않지만 문서에 다음과 같은 내용이 있습니다.https://www.chartjs.org/docs/latest/general/options.html#scriptable-optionschartjs도 좋은 라이브러리이지만 &#34;독특한 차트&#34;에는 d3.js가 훨씬 더 유용합니다.d3.js 자체가 어려우시면 이 기반으로하는 c3.js 같은것을 사용하시길 추천드립니다.

Minwoo Kim · Answer

&#64;킁킁탐정 안녕하세요. 좋은 정보 감사합니다. D3.js 를 알고 있었지만 사용하기가 아직 버거워서 Chart.js 를 사용하고 있었습니다.C3.js 같은 게 있는 줄은 말씀해주셔서 알았습니다.좋은 대안을 주셨지만 아쉽게도 지금은 불가피하게 Chart.js 를 이용해 구현해야 될 것 같습니다. 또한 첨부하신 링크도 이전에 살펴봤던 내용인데, 제가 원하는 borderDash 를 커스텀하는 부분에 대한 스크립팅 기능을 제공하지 않더라구요.Chart.js 의 경우 버전 별로 내용이 상당히 많이 상이하고, 구현 방식이 모두 각기 다르더라구요. 더군다나 Grid line 의 borderDash 에 대한 내용은 거의 없어서 헤딩 하고 있네요.. ㅠㅠ

킁킁탐정 · Answer

불가피하게 Chart.js를 사용하셔야 한다면 방법은 두 가지뿐입니다. 하나는 Plugin를 제작하는 것이고 다른 하나는 Chart.js 소스 코드를 일부 수정하는 방법입니다. 잠시 Chart.js를 살펴본 결과 다음의 줄을 확인하시면 소스 코드 수정에 도움이 되실 거 같습니다. 결국엔 이것도 Plugin 형태로 만들어진 거 같습니다.[_computeGridLineItems] 이 함수에서 정보를 수집합니다. 정보의 수집과 반환하는 부분을 찝어보면 아래와 같습니다.https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L1006https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L1086https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L1109https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L1124 https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L1132 [drawGrid] 이 함수에서 실제로 수집된 정보를 사용하여 라인을 그립니다. 함수 내부에서 drawLine이 어떻게 호출되고 사용되는지 확인해보시면 좋습니다.https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L1436

Minwoo Kim · Answer

&#64;킁킁탐정 정말 감사합니다. 어떻게 내부 핵심 코드를 그렇게 파악하시는지 대단하십니다!우선 말씀해주신대로 내부 코드를 수정하는 것보다는 Plugin 형태로 제작해야 될 것 같습니다. 첨부해주신 링크를 참고해서 플러그인 제작을 해봐야겠습니다.단순히 Y 축 선 스타일 일부 수정하는데 엄청난 고생이 필요하네요.. ㅠㅠ

킁킁탐정 · Answer

소소한 문제로 보여도 막상 시간은 큰 문제보다 더 오래 걸릴 수 있습니다. 혹시 될지는 모르지만 생각을 전환해서 grid가 아니라 Line chart을 가로로 추가할 수 있다면 쉽게 이 문제를 해결할 수 있을 거 같습니다. Chart.js의 tests 내용을 보면 다음과 같이 borderDash가 scriptable이라 함수를 사용할 수 있습니다. grid.borderDash만 script를 지원하지 않아서 생기는 문제이니 가능한지 한번 테스트해 보시는 것도 좋을 거 같습니다. 그럼 도움이 되셨길 바라며 답변은 여기까지만 하겠습니다. https://github.com/chartjs/Chart.js/blob/96dd2010288e674b889023866d595e584f1ae875/test/fixtures/controller.line/borderDash/scriptable.js#L10

Minwoo Kim · Answer

원하는 결과를 다음을 이용해서 구현했는데, 추후 다른 분들도 참고하실 수 있을 내용일 것 같아 댓글에 코드 작성해둡니다. Chart.js 사용 시 차트의 options 하위 scales 필드 내부 값으로 넣어 사용하면 위 질문과 같은 내용을 구현할 수 있습니다.y2: { max: 100, min: 0, ticks: { display: false, stepSize: 25 }, grid: { drawTicks: false, drawBorder: false, color: 'rgba(255, 255, 255, 0.2)' } }

혹시 Chart.js 를 능숙하게 사용하시는 분이 계실까요?

6개의 답변

Q&A 목록