본문 바로가기

분류 전체보기

 (224)
간단한 말풍선 css 생성 사이트 https://cssarrowplease.com/ CSS Arrow Please - By Simon Hoejberg - @shojberg Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. Fork me on Github cssarrowplease.com
mouse over시 설명 텍스트가 따라다니는 갤러리 https://codepen.io/kathykato/pen/KRQOKY 직접 링크 들어가서 확인 필요 See the Pen Gallery by Katherine Kato (@kathykato) on CodePen.
마우스커서 따라다니는 도형 + overlay 효과 https://codepen.io/ig_design/pen/VgaXaY 이건 직접 링크로 들어가서 봐야 커서가 제대로 작동함. See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.
센스있는 go 버튼 https://codepen.io/kathykato/pen/rZRaNe 사람들이 많이 좋아요 누른 펜은 이유가 있다! See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.
hover slide https://codepen.io/ig_design/pen/MRbJWW See the Pen Hover slider (dark/light) - ver 3 by Ivan Grozdic (@ig_design) on CodePen.
감각적인 card hover https://codepen.io/hexagoncircle/pen/XWbWKwL See the Pen Card Hover Interactions by Ryan Mulligan (@hexagoncircle) on CodePen.
클릭한 카드만 띄우기 + detail 보이기 https://codepen.io/candroo/pen/wKEwRL See the Pen 3D Fold out reveal by Andrew Canham (@candroo) on CodePen.
gradient buttons https://codepen.io/pirrera/pen/bqVeGx See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
css hover effects https://codepen.io/honglio/pen/kWXXvj See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.
기본적인 responsive table https://codepen.io/geoffyuen/pen/DZxEKy See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.
텍스트 나타나는 효과 https://codepen.io/Sonick/details/AwXJdM See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.
label이 있는 gauage차트 highchart guage chart with label See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size:..
5단계 gauage chart highchart 5steps guage chart See the Pen highchart 5steps guage chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size: '15..
series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기) series: [{ name: '데이터1', data: [100, 70], enableMouseTracking: false, // 차트에 mouseover 액션 false }, { name: '데이터2', data: [50, 20], // 데이터 값 설정 visible: false, // 초기에 차트영역에서 숨김 "showInLegend": false, // legend에서 보이지 않게 숨김 }]
간단한 multi yAxis 차트 highchart dual + multi yAxis chart See the Pen highchart simple dual chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { xAxis: { categories: ['카테고리1', '카테고리2', '카테고리3'], }, yAxis: [{ title: { text: '시리즈1 y축' }, labels: { format: '{value}개' // y축 format 설정 }, }, { title: { text: '시리즈2 y축' }, labels: { format: '{value}원' // y축 format..
비교 차트 highchart compare chart See the Pen highchart compare chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) , jquery 필요 //chart Highcharts.chart('chart', { chart: { type: 'column', marginTop: 30, marginBottom: 80, }, title: null, subtitle: null, xAxis: { categories: ['before', 'after', ], plotBands: [{ from: 0, // Start of the plot band to: 1, // End ..
일주일간 15분 단위로 데이터 넣기 highchart 1week data (every 15 minutes) 챗지피티랑 스무번은 넘게 대화하면서 겨우 겨우 만든 소스 See the Pen highchart 1week data (evety 15 minutes) by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) // x축 카테고리, 데이터 생성 var data = []; var dayLabels = ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"]; for (var day = 0; day < 7; day++) { for (var hour = 0; hour < 24; hour++) { for (var minute = 0;..
legend에서 특정 item의 click이 안되게 할때 옵션 series: [{ name: '시리즈1', data: [1,2,3] }, { name: '시리즈2 (legend클릭안됨)', data: [1,2,3], events: { legendItemClick: function() { return false; } } }]
y축에 가로로 선 그리기 (plotLines) highchart yAxis line (plotLines) 보통 평균값, 기준값 등 나타낼때 쓰는듯. See the Pen highchart yAxis line (plotLines) by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) //chart Highcharts.chart('chart', { xAxis: { categories: ["'22.09", "'22.10", "'22.11", "'22.12", "'23.01", "'23.02", "'23.03", "'23.04", "'23.05", "'23.06", "'23.07", "'23.08"], labels: { y: 20, }, }, yAxis: { p..
tooltip의 poinformat을 수정해야 할 때 poinformatter를 사용하면 표출되는 형식을 바꿀수 있는데, 이럴때 기존 formatter 앞에 나오는 동그란 모양의 심볼(?) - 즉 해당 데이터가 어떤 시리즈인지 표시하는 색깔있는 원을 꼭 넣어주고 싶은 경우, 아래 소스 참고. tooltip: { pointFormatter: function() { return '● ' + this.series.name + ': ' + this.y + ' '; }, shared: true, useHTML: true, }, + 필요한경우, point formater 아래에 footer format을 이용해 poinformatter를 수정하지 않고 토탈 값 등 추가 가능 footerFormat: 'Total: {point.total} ',
맨위로
Total : Today :
728x90

티스토리툴바