코딩기록

원래 chart.js 에서 함수를 직접 작성해가면서 기능을 추가했는데기존 네 영역에도 색을 주고호버하면 색을 또 주고클릭하면 또 주고..코드가 길어질 것 같아서 html 객체를 생성했다.  11번 탭탭탭 22번 탭탭탭 3번 탭탭탭 4번 탭탭탭 .background도 영역 나누기 .chart { position: relative; width: 700px;}.background { width: calc(100% - 47px); height: calc(100% - 61px); left: 27px; ..

const dataValues = [10, 10, 0, 3, 2, 0, 7]; const filteredData = dataValues.map(value => (value === 0 ? null : value)); const pointRadiusValues = dataValues.map((value, index) => { if ( (value > 0) && (dataValues[index - 1] === 0 && dataValues[index + 1] === 0) || (index === dataValues.length - 1 && dataValues[index - 1] === 0 ) || (dataValues[0] > 0 && dataValues[1] === 0 ) ) { return 3; } else..

options: { onHover: (event, chartElement) => { event.native.target.style.cursor = chartElement.length === 1 ? 'pointer' : 'default'; // console.log(event); // console.log(chartElement); // if(chartElement.length === 1) { // event.native.target.style.cursor = 'pointer'; // } else { // event.native.target.style.cursor = 'default'; // } }, scales: { y: { beginAtZero: true } } } - 그래프가 있으면 chartElem..

html WWW.CHARTJS3.COM (Chart JS ) 모달 헤더 body close css .bar_modal { z-index: 10; position: fixed; margin: 0; padding: 0; left: 0; top: 0; height: 100vh; width: 100%; background: rgba(0,0,0,0.3); transition: opacity .2s; } .bar_modal.hide { opacity: 0; z-index: -10; } .modal { background: #fff; width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: ce..

https://www.youtube.com/watch?v=HCLkAlm9lPI const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], labelsLink: [ 'https://www.chartjs4.com', 'https://www.naver.com', 'https://www.google.com', 'https://www.chartjs4.com', 'https://www.google.com', 'https://www.naver.com', 'https://www.google.com', ], datasets: [{ label: 'Weekly Sales', data: [18, 12, 6, 9, 12, 3, 9], backgroundC..