코딩기록

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

데이터는 0 ~ 100으로 들어가지만 위아래 여백을 주고 싶어서 +- 10씩 해줬다.   const ctx = document.getElementById('myChart');const dataValues = [75, 25, 50, 0, 100];// 이미지 아이콘const imageUrls = [ './emoji_0.png', './emoji_25.png', './emoji_50.png', './emoji_75.png', './emoji_100.png',]const images = imageUrls.map(url => { const img = new Image(25, 25); img.src = url; return img;});..

1. 포인트 이미지, 테두리 설정 2. hover시에만 이미지로 📌 포인트 이미지, 테두리 설정 - 분산형 차트..! 뭔가 무시무시해보임. usePointStyle: true, // 포인트 스타일 바꾸기 위해서 true pointStyle: image, // 선언된 이미지 가져옴 clip: false, // 그래프 밖으로 이미지 잘리는 거 막기 위해서 false const imageBorder = { id: 'imageBorder', beforeDatasetsDraw(chart, args, plugins) { const {ctx, data} = chart; ctx.save(); const x = chart.getDatasetMeta(0).data[0].x; const y = chart.getDataset..

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..

링크에서 조금만 바꿨음 x라벨 위치값 찾았으니까 툴팁도 나오게 할 수 있을 것 같아서 바꿔 봄 html css .chartBox { width: 700px; position: relative; border-radius: 20px; border: solid 3px rgba(54, 162, 235, 1); background: white; } .x_label_tooltip { display: none; position: absolute; bottom: -20px; background:#fff; border: 1px solid red; } .x_label_tooltip.active { display: block; } const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu', ..

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..