Category (56) 썸네일형 리스트형 Echarts 그리기 Including ECharts echarts.js를 저장한 디렉토리에 다음 내용으로 새 index.html 파일을 만듭니다. CDN GitHub 그냥 차트를 삽입하고 싶으면 이 구조를 그대로 갖다 놓고 옵션만 변경해서 사용하시면 편합니다. id가 main인 태그로 그래프가 그려질 캔버스를 만든다. js 부분에서 myChart에 초기화된 echart 인스턴스를 만들어 option을 설정하고 setOption으로 차트를 그려낸다. 뭐 요정도로 이해하시면 될 것 같습니다. Examples 수많은 Examples 중에 마음에 드는 그래프를 하나 골라 연습해 봅니다. 위의 코드로 index.html을 작성하고 option만 변경해 주면 됩니다. 그래프를 클릭하면 이런 화면이 나오고 바로 option edit이 .. ECharts.js 소개 및 설치 Introduction Apache ECharts는 직관적이고 대화형이며 사용자 정의가 가능한 차트를 상용 제품에 쉽게 추가할 수 있는 강력한 무료 차트 및 시각화 라이브러리입니다. 순수 JavaScript로 작성되었으며 완전히 새로운 경량 캔버스 라이브러리인 zrender를 기반으로 합니다. 여러 차트 라이브러리들 중 Echarts를 사용하기로 한 이유는 수많은 직관적인 sample에 홀렸기 때문입니다. 기본적인 line, bar 차트부터 3D까지 구현되어 있고, 바로 코드를 편집해 볼 수도 있죠. 직접 써보니 정말 다양한 기능과 디자인을 적용할 수 있어 좋았습니다. 제가 사용해 본 건 chart.js 뿐이니 정확한 비교는 되지 않겠지만 적어도 Zoom 기능은 Echarts가 더 뛰어나다고 자부합니다... Bootstrap chart - 라이브러리 소개 charts가 이미 포함되어 있는 bootstrap theme을 사용하는 것이 아니라면 CDN, npm 또는 직접 다운받아 설치하는 여러 방법으로 chart 작성이 가능합니다. bootstrap으로 따로 스타일링을 하는 것은 아니니 여러 차트 라이브러리를 소개해볼까 합니다. Chart.js Chart.js 는 디자이너와 개발자를 위한 간단하면서도 유연한 JavaScript 차트입니다. https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirel.. Bootstrap - free theme <CORONA> Tables # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Bootstrap v4.6에서 제공하는 Table들은 위의 basic table 클래스 및 다양한 옵션을 갖고 있습니다. Table head options Striped rows Bordered table Borderless table Hoverable rows Small table Contextual classes Captions Responsive tables 테이블의 구조는 거의 같고 class만 변경해주면 원하는 스타일대로 사용 가능해서 편리합니다. 에서는 5가지 기본 table을 제공하는데요. Basic Table Hoverable Table S.. Bootstrap Icon Bootstrap Icons Bootstrap은 다양한 아이콘을 사용하여 메뉴 등등을 더욱 명확하게 가시화 할 수 있는데요. 기본적으로 Bootstrap에서는 1500개 이상의 무료 Icon을 제공합니다. 직접 원하는 아이콘 종류를 검색해 볼 수도 있습니다. 설치 방법도 간단히 아래 코드를 cmd에 입력해 주면 됩니다. npm i bootstrap-icons https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap.com Font Awesome 또 많이 사용하는게 Font Awesome 인데요. 약 7천개 이상의 icon을 제공하지만 무료 버전은 16.. Bootstrap - free theme <CORONA> 설치 Getting started 컴파일되고 바로 사용할 수 있는 버전의 템플릿을 직접 사용할 수 있습니다. 또한, 템플릿을 광범위하게 사용자 정의할 수도 있습니다. index.html이나 pages 폴더에 있는 sample 템플릿을 바로 사용할 수도 있고, 필요한 컴포넌트들을 찾아 직접 만들 수도 있습니다. 데모 목적으로 필요한 vender 파일을 'vendors' 폴더에 묶었습니다. 응용 프로그램에 해당 vender가 모두 필요하지 않을 수도 있습니다. vender 패키지 파일을 변경하려면 gulpfile.js 파일에서 관련 작업에 대한 src 경로를 변경하고 bundleVendors 작업을 실행하여 vender 파일을 다시 빌드해야 합니다. gulpfile.js를 확인해 보니 gulp-tasks를 봐야 .. Bootstrap - free theme <CORONA> 시작하기 Bootstrap Theme Demo Preview 지난 시간에는 Bootstrap 4를 사용한 admin theme인 를 소개했는데요. 이번 시간에는 본격적으로 설치하는 방법에 대해 공부해 보려 합니다. 저는 프로그램 배우면서 설치 또한 쉽지 않음을 느꼈기에... 후에 방법을 또 까먹고 허덕일 저와 여러분들을 위해 정리해 봅니다. 일단 제가 사용하고 있는 프로그램 tool은 visual studio 2015 입니다. https://www.bootstrapdash.com/product/corona-free/ Bootstrap Dark Theme Admin Dashboard | Corona free Download Corona, an impressive dark theme admin dashboard av.. Bootstrap - free theme <CORONA> 소개 Bootstrap Introduction 세계에서 가장 인기있는 프론트엔드 오픈 소스 툴킷이며 Sass 변수와 믹스인, 반응형 그리드 시스템, 광범위한 사전 제작된 컴포넌트, 그리고 강력한 JavaScript 플러그인이 있는 Bootstrap으로 반응형 모바일 우선 사이트를 디자인하고 입맛대로 바꿔보세요. https://getbootstrap.kr/ Bootstrap 세계에서 가장 인기있는 HTML, CSS, JS 라이브러리. getbootstrap.kr Bootstrap 홈페이지에 나와있는 소개입니다. 이제 겨우 개발 6개월 차인 저는....Sass 변수? 믹스인? 그리드? 모르는 말들이 너무 많아 이미 혼란스럽지만 혹시나 저와 같은 분들을 위해 Bootstrap 적용을 해나가는 과정을 포스팅 해볼까 .. 이전 1 ··· 4 5 6 7 다음
