듀비 라이프

c3.js 설치 및 기본 사용법은 아래 링크 참고 https://vivacolor96.tistory.com/68 javascript ) c3.js를 이용한 차트 표시 쇼핑몰 관리자를 작업중인데, 대시보드에 매출이나 회원 등의 수치 변화를 나타내는 그래프를 표시해주어야 했다. 예전 작업에서 사용했던 c3.js가 생각나서 사용해보기로 했다. 시작하기 일단 vivacolor96.tistory.com 위의 내용까지는 javascript 안에서 노출하고자 하는 값을 배열에 직접 값을 넣어주었다. 하지만 분석용 차트 표시하면서 이렇게 사용할 사람은 많지 않겠지.. 나 또한 쇼핑몰 관리자에서 여러 값의 변화를 표시하기 위해 사용하는 것이므로 데이터 연동이 필수적이다. 페이지 로딩하자마자 보이는 차트라서 ajax를 사..

쇼핑몰 관리자를 작업중인데, 대시보드에 매출이나 회원 등의 수치 변화를 나타내는 그래프를 표시해주어야 했다. 예전 작업에서 사용했던 c3.js가 생각나서 사용해보기로 했다. 시작하기 일단 아래 깃허브 링크에서 c3.js를 다운받는다. https://github.com/c3js/c3/releases/tag/v0.7.20 Release v0.7.20 · c3js/c3 Changes Fix config subchart_axis_x_show (#2806) Fix pan of y-axis when zoomed and rotated=true #2799 (#2805) github.com 서버에 올리고, 아래처럼 사이에 추가해준다. 1 2 3 4 5 6 cs c3는 d3기반으로 이루어져 있다. d3.js도 함께 불러와..

GoToPage 클래스를 누르면 페이지가 이동된다. 현재 페이지를 전역으로 선언하고 swiper에서 슬라이드 넘길때 현재 페이지 index값을 가져와서 저장 한다. 이후 버튼 눌렀을 때 현재 페이지의 다음 페이지로 넘어가도록 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 var activePage = 0; // 슬라이드 현재 페이지 var total_count = 5; // 슬라이드 전체 페이지 // 스와이퍼 생성 var swiperSlide= new Swiper(".swiperSlide", { loop : true, speed : 500, autoplay: { delay: 10..

슬라이드 조건 - 슬라이드 개수는 5개 - delay시간은 5초 - 자동으로 5초뒤면 넘어가고, 무한루프 swiper로 슬라이드 만들고, 세로 슬라이드 옵션을 켜면 익스플로러에서 깨지는 현상이 있었다. 그래서 그냥 직접 만들었던 세로 슬라이드 소스코드다. 그땐 DB에서 값 불러오는 슬라이드였어서 php 코드랑 얽혀있었는데 다 배제하고 슬라이드 기능만 있는 순수 html, javascript 코드다. 요샌 익스플로러까지 신경들 안쓰니, 그냥 스와이퍼 사용한다. 스와이퍼 짱짱맨 html, javascript 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40..

EX) var arr = ['a', 'b', 'c', 'd']; // arr = ['a', 'b', 'c', 'd'] arr.push('d'); //맨뒤에 요소 추가 // arr = ['d', 'a', 'b', 'c'] arr.unshift('d') //맨앞에 요소 추가 // arr = ['a', 'b', 'd', 'c'] arr.splice(2, 0, 'd') //index 2 ('c')의 위치에 요소를 추가 // arr = ['a', 'b', 'd', 'c', 'e', 'f'] arr.splice(4, 0, 'e', 'f') // index 4의 위치에 2개의 요소를 추가 var arr = ['a', 'b', 'c', 'e', 'f']; // arr = ['a', 'b', 'c', 'e'] arr.p..