본문 바로가기

퍼블리싱

 (179)
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} ',
자주 쓰는 차트 전역 옵션 내가 자주 사용하는 차트 전역 옵션 (https://umings.github.io/file/highchart_common.js) Highcharts.setOptions({ lang: { thousandsSep: ',' }, chart: { backgroundColor: 'transparent', // 차트 background 컬러 style: { fontFamily: 'pretendard' // 차트 전체 font family 적용 } }, navigation: false, // 차트 메뉴 버튼 유/무 (필수) credits: { enabled: false }, // 하단 하이차트 주소 숨김 (필수) title: null, // 대제목, 없을 경우 -> title: undefined or null sub..
seriese의 특정 data만 색상 다르게 넣기 highchart series one data color differnt See the Pen highchart series one data color differnt by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) 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, }, }, series: [{ name: '시리즈', type: 'col..
css 가상요소에 content로 텍스트 넣을때 br 처리 선택자::after{ content: "첫번째줄\A두번째줄"; white-space:pre; }
스크롤 끝까지 내렸을때 이벤트 적용하기 아주 간단한 소스 See the Pen Untitled by publisher.kim (@publisherkim) on CodePen. html 컨텐츠 css .container{border:1px solid #ddd; height:300px; overflow-y:auto; box-sizing:border-box; padding:20px;} .content{height:500px; background:#777; color:#fff;} js *jquery필요 $(document).ready(function () { $(".container").scroll(function(){ var containerSctop = $(".container").scrollTop(); var containerHeight = $..
버튼 클릭시 input 값이 증감되는 소스 See the Pen plus minus input by publisher.kim (@publisherkim) on CodePen. html - + - + css .count_area{overflow:hidden;} .count_area *{box-sizing:border-box;} .count_area input[type=number]{height:30px; border:1px solid #ddd;float:left; border-left:0; border-right:0; width:30px; text-align:center;} .count_area input[type=number]::-webkit-inner-spin-button {appearance: none;-moz-appearance: none;..
swiper slider with background scale animation 배경화면이 scale 되는 swiper slider See the Pen swiper slide with background and text animation by publisher.kim (@publisherkim) on CodePen. html 이전 다음 1슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 2슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 3슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 css .slider_wrap{width:800px; height:500px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:500px;} .swiper-slide{width:800px; height:5..
랜덤으로 순서가 바뀌는 slider (+with video), 플러그인 x 새로고침 할때마다 랜덤으로 순서가 바뀌는 slider. 현재 작동하는 slide의 video가 끝나면 다음 슬라이드로 넘어가는 방식. pagination 있음, slider plugin 사용 안함! See the Pen random slide with video by publisher.kim (@publisherkim) on CodePen. html 비디오1번_타이틀 비디오1번_텍스트 비디오2번_타이틀 비디오2번_텍스트 비디오3번_타이틀 비디오3번_텍스트 비디오4번_타이틀 비디오4번_텍스트 01. 비디오1_페이지네이션 02. 비디오2_페이지네이션 03. 비디오3_페이지네이션 04. 비디오4_페이지네이션 css /** mainSlide **/ #mainSlide, #mainSlide .videoslide,..
tree menu with checkbox 플러그인을 쓰지 않고 구현하는 tree menu See the Pen tree menu with custom checkbox by publisher.kim (@publisherkim) on CodePen. html 전체 메뉴1 메뉴1_1 메뉴1_1_1 메뉴1_1_1_1 메뉴1_1_1_2 메뉴1_2 메뉴1_2_1 메뉴1_2_1_1 메뉴1_2_1_2 메뉴1_2_2 메뉴1_2_2_1 메뉴1_2_2_2 메뉴2 메뉴2_1 메뉴2_2 메뉴2_3 전국 서울 종로구 강남구 2022년 2021년 css /* treebox */ .treebox{border:1px solid #ddd; padding:20px; margin-left:20px; margin-top: 20px; max-width: 400px; box-sizin..
fullpage.js 기본 소스 https://codepen.io/pohtani/pen/OXMwKb Fullpage.js - Custom Menu ... codepen.io $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], navigation: true, navigationTooltips: ['11', '22', '33','44', '55'], showActiveTooltip: true, scrollingSpeed: 1000 }); }); 위 소스 커스텀해서 사용.
DOM 변경 감지해서 이벤트 발생 jquery와 javascript 함께사용. ajax 등을 통해 페이지 이동 없이 dom이 변경될때, ajax 소스 건드리지 않고 이벤트 추가 적용할때 자주 사용. $(document).ready(function() { var target = $('셀렉터')[0]; // 뒤에 배열도 꼭 써줘야함 var observer = new MutationObserver((mutations) => { console.log("dom 변경됨!") }) var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); }); 아래 스크립트도 작동. const observer = new Mutatio..
head fixed table with custom scrollbar jquery.mCustomScrollbar.js 를 사용해 커스텀 스크롤바를 넣은 head fixed table See the Pen head fixed table with mCustomscrollbar by publisher.kim (@publisherkim) on CodePen. html 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 css /* table */ .tbl_wrap{width:60..
fixed header + gnb (header에 hover시 gnb 열리면서 on효과, 스크롤시 on효과) See the Pen 풀사이즈 header + gnb by publisher.kim (@publisherkim) on CodePen. html 대메뉴1 서브1 서브2 서브3 서브4 대메뉴2 서브1 서브2 서브3 서브4 대메뉴3 서브1 서브2 서브3 서브4 대메뉴4 서브1 서브2 서브3 서브4 css /* header */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); * {font-family: 'pretendard';} body{background: url(https://umings.github.io/images/bg_dark.jpg) no-repeat center / cov..
맨위로
Total : Today :
728x90

티스토리툴바