kasumil의 코딩 공작소

const ctx = document.getElementById('lineGraph').getContext('2d'); let gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(25, 224, 167, 1)'); gradient.addColorStop(1, 'rgba(25, 224, 167, 0)'); const lineData = { labels: [1, 2, 3, 4, 5, 6, 7], datasets: [ { label: 'table', data: [0, 22, 45, 67, 77, 88, 100], backgroundColor : gradient, fill: true, borderColor : "#19..

차트.JS 옵션에 대한 설명서가 필요했는데, 그것을 깔끔하게 설명한 내용이 이어서 가져와봤다. Chart.js ver 3.0 이상 적용코드이다. 원래는 내용을 그대로 안가져오는 편이긴하나 가끔 원본 글을 삭제하거나 비공개 처리해서 해당 코드를 못 보는 경우가 있어 가져왔다. 1️⃣anchor - 데이터레이블의 위치 👉🏻영어로는 '닻을 내리다, 정박하다'이다. 즉 데이터레이블이 차트 축에서 얼마나 떨어져있는지 정한다. start: 차트에서 가장 가까이 있다. center: default값이고 차트에서 중간 거리만큼 떨어져있다. end: 차트에서 가장 멀리 떨어져있다. start - center - end 👉🏻차례대로 속성을 start, center, end로 줬을 때이다.(미세한 차이!) 2️⃣clamp ..

const ctx = document.getElementById('lineGraph').getContext('2d'); let gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(25, 224, 167, 1)'); gradient.addColorStop(1, 'rgba(25, 224, 167, 0)'); const lineData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: 'Dataset', data: [ 5, 20, 45, 50, 60, 80, 150], backgroundCo..

const ctx = document.getElementById('lineGraph').getContext('2d'); let gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(25, 224, 167, 1)'); gradient.addColorStop(1, 'rgba(25, 224, 167, 0)'); const lineData = { labels: ['', "January", "February", "March", "April", "May", "June", "July", ''], datasets: [ { label: 'Dataset', data: [, 5, 20, 45, 50, 60, 80, 150], bac..

카카오 서버에 불나는 바람에 이전 글이 안 가져와지는데, 이전 글을 참고해서 기본코드를 작성한 후. 진행 할 것. 기존 작성된 코드는 context => 부분에서 index를 따로 가져와야 해서 이걸 반응형으로 고쳣더니 화면에 따라 테두리가 사라지는 버그가 있었다. 그러다가 겨우 찾았다. 정답은 index가 아닌 value 값을 통해 해당 line을 찾는 것이었다. 이러한 질문을 보고 원개발자가 해당 기능을 추가하겠다고 적었다. https://github.com/chartjs/Chart.js/issues/10007 Radar graph - grid customization · Issue #10007 · chartjs/Chart.js I'm using a Radar graph and I would like..

차트 js를 사용하다보면 차트 내에서 해당 값이 어떤지 표시할 필요가 있다. 시안성 측면에서 매우 유리하니까. 그런데, 이게 기능구현이 매우 어려웠다. 왜 안되나 했더니 이게 확장 라이브러리로 지원하는 기능이었네? 사용방법은 3번째 링크를 참조하자. 대충 공식문서를 보면 plugins 코드 안에 설정하고, data 객체에도 따로 넣어주면 된다. 하지만 3번째 링크보면 더 자세히 설명되어 있다. Chart.defaults.set('plugins.datalabels', { color: '#FE777B' }); var chart = new Chart(ctx, { options: { plugins: { // Change options for ALL labels of THIS CHART datalabels: { ..

+++ 2022-10-28 해당 코드로 자동으로 들어가게 수정했습니다 2022.10.17 - [취업/Chart.js] - [chart.js] Radar 차트 마지막 외곽선만 두껍게 하기 [chart.js] Radar 차트 마지막 외곽선만 두껍게 하기 카카오 서버에 불나는 바람에 이전 글이 안 가져와지는데, 이전 글을 참고해서 기본코드를 작성한 후. 진행 할 것. 기존 작성된 코드는 context => 부분에서 index를 따로 가져와야 해서 이걸 반응형 kasumil.tistory.com 본문보다 위의 링크를 참조하시기 바랍니다. const radarData = { labels: [ '1', '2', '3', '4', '5', '6', ], datasets: [{ data: [265, 159, 390, ..

https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.js Getting Started Let's get started using Chart.js! First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness. Now that we have a canvas we can use, we need to include Chart.js in our page. Now, we c www.chartjs.org 차트 작성법은 뭐 대충 이렇고 레이다 차트의 속성이 중요하다. const rada..