본문 바로가기

javascript/Chartjs

 (8)
Chart.js Stacked Bar Chart 차트 BorderRadius 사방으로 둥글게 chart js에서 bar 막대 차트를 가로형으로 만들고 가장자리를 모두 둥글게 하고 싶었는데... 생각보다 오래걸림. 왜냐하면 데이터 시작하는 부분에서 자꾸 borderRadius가 안먹었다. 해결 방법은.... 시작하는 데이터에 borderSkipped:false를 해주어야 했다!!! 코드펜에서 테스트한 나의 결과물 : HTML 삽입 미리보기할 수 없는 소스 처음에 영문도 모를 때 도움 받았던 이슈 : https://github.com/chartjs/Chart.js/issues/9217 Stacked bar chart with borderRadius only rounds the last dataset · Issue #9217 · chartjs/Chart.js Expected Behavior All b..
chart js noData 안되는데.. 일단 저장 ㅠㅠ const noData = { id: 'noData', afterDatasetsDraw :((chart, args, plugins) => { const {ctx, data, chartArea : {top, bottom, left, right, width, height} } = chart; ctx.save(); if(mainMixedChart[propertyNM].data.datasets[0].data.length === 0){ ctx.fillStyle = 'rgba(102,102,102, 0.8)'; ctx.fillRect(left, top, width, height); ctx.font = 'bold 20px sans-serif'; ctx.fillStyle = 'black';..
Chart js MixedChart Chart.js MixedChart 막대차트와 라인차트. 테스트 코드지만.. 힘들게 짰는데.. 역시 필요가 없게 되었다. 코드 파기하기전에 복붙해놓고...나중에 공부해야지. 나중이 과연 오긴 할까.. 일단 복붙이라도 ㅠㅠ const mainMixedChart = { mainTrfByAcsr : null, // 시간대별 접근로 교통량 차트 mainTrfByAcsr15mi: null, // 시간대별 접근로 교통량 15분 데이터 차트 mainPdstByAcsr : null, // 시간대별 접근로 보행자 차트 mainLosByAcsr : null, // 시간대별 접근로 보행자 차트 init:function(){ mainMixedChart.getTrfByAcsr_1hh(); // 시간대별 접근로 교통량 1시간 테..
Chart.js에서 차트 update할 때, 왜 함수로 makeMixedChart를 만들어 놨고, 함수호출해서 MixedChart 생성후에 필요한 옵션을 그때그때 추가하면서 update하는 식인데... 오늘 처음 안 사실.. 1번처럼 하면 안먹혔다. 2번처럼 하면 먹힌다. 함수를 안만들고 그냥 new해서 바로바로 할 때는 또 된다.. //1번 적용안됨. //mainMixedChart.chartNM.options = {plugins:{legend:{display:false}}, datalabels: { display: false }}; //2번 mainMixedChart.chartNM.options.plugins.legend = {display: false }; mainMixedChart.chartNM.options.plugins.datalabels =..
Chart.js 라인차트에 배경색 넣는 방법 블로그 글 모음 https://blog.vanila.io/chart-js-tutorial-how-to-make-gradient-line-chart-af145e5c92f9 Chart.js Tutorial — How To Make Gradient Line Chart Chart.js is a JavaScript library that allows you to create beautiful charts to represent different types of statistics. It is based on… blog.vanila.io https://www.chartjs.org/docs/latest/charts/area.html#filling-modes Area Chart | Chart.js Area Chart Both line..
차트js chartjs 버전 2.9.4 ticks x축 y축 색상 변경 차트js , 2.9.4버전 사용중인데... x축의 색상을 변경하고 싶었다! options 아래에 scales 아래에.. 이런식으로 찾아들어가야함... 버전이 감사한 블로그!!! https://ming9mon.tistory.com/122 Chart.js 배경, 폰트, 라인, 라벨 색상 변경 X축 폰트 색과 라인 색 x축 폰트와 라인의 색과 사이즈는 다음과 같이 변경할 수 있다. 라인을 굵게 하고 싶다면 linewidth를 높게 해 주면 되고, 라인을 보고 싶지 않다면 0으로 설정해 주면 된다. op ming9mon.tistory.com 한글문서 차트js!! https://yeon22.github.io/Chartjs-kr/docs/latest/axes/styling.html#tick-configuration..
Chartjs Line chart 라인차트 디자인요소 수정하기 https://www.chartjs.org/docs/latest/configuration/elements.html#types Elements | Chart.js Elements While chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dat www.chartjs.org 예제 : https://codepen.io/keepgoing-n..
chartjs half doughnut 차트 만들기 chart.js로 차트 만들 때, 반드시 버전 확인하기. 최신버전 : 3.9.1 반틈 도넛 차트를 구현하기위해 구글링하다가 알게된 사실 : ( 버전확인!!!! ) 낮은 버전에서 circumference와 rotation의 값을 1 * Math.PI 이런식으로 줬던 모양인데 options: { rotation: 1 * Math.PI, circumference: 1 * Math.PI, } https://www.chartjs.org/docs/3.9.1/charts/doughnut.html#pie Doughnut and Pie Charts | Chart.js Doughnut and Pie Charts Pie and doughnut charts are probably the most commonly used ch..

티스토리툴바