dopyo.js
간단하고 가벼운 자바스크립트 차트 라이브러리.
css파일과 javascript를 다운로드 받아서 직접 link와 script 태그로 삽입하세요.
<!-- Uncompressed --> <link rel="stylesheet" href="$YOUR_PATH/dopyo.css"> <script src="$YOUR_PATH/dopyo.js"></script> <!-- Compressed --> <link rel="stylesheet" href="$YOUR_PATH/dopyo.min.css"> <script src="$YOUR_PATH/dopyo.min.js"></script>
NPM 설치를 제공하고 있습니다. Webpack 등을 사용한 모듈 번들러와 함께 사용할 수 있습니다.
npm install dopyo.js
import 'dopyo.js/dist/dopyo.css'; import { dopyo } from 'dopyo.js';
<div id="linechart"></div>
document.addEventListener('DOMContentLoaded', () => { const lineChart = dopyo.createChart({ type: 'line', size: { width: 600, height: 400, }, containerEl: '#linechart', data: { xAxis: ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05',], series: [ { name: '라인그래프1', data: [0, 10, 20, 50, 30,] }, { name: '라인그래프2', data: [20, 0, 15, 20, 70,] }, { name: '라인그래프3', data: [10, 50, 10, 30, 50,] }, ] }, options: { xAxis: { show: false, }, yAxis: { show: true, title: 'y축 이름' }, tooltip: { show: true, } } }); })
<div id="areachart"></div>
document.addEventListener('DOMContentLoaded', () => { const areaChart = dopyo.createChart({ type: 'area', size: { width: 600, height: 400, }, containerEl: '#areachart', data: { xAxis: ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05',], series: [ { name: '라인그래프1', data: [30, 50, 70, 120, 100] }, { name: '라인그래프2', data: [20, 30, 90, 60, 120] }, { name: '라인그래프3', data: [0, 40, 60, 30, 100] }, ] }, options: { xAxis: { show: true, title: 'x축 이름' }, yAxis: { show: true, title: 'y축 이름' }, tooltip: { show: true, } } }); })