dopyo.js examples

dopyo.js

간단하고 가벼운 자바스크립트 차트 라이브러리.

{{ item.title }}

NOTE
🚧🛠 현재 개발중입니다...사용에 주의하고 계속 지켜봐주세요 👀

Installation

직접 삽입

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

NPM 설치를 제공하고 있습니다. Webpack 등을 사용한 모듈 번들러와 함께 사용할 수 있습니다.

npm install dopyo.js

import 'dopyo.js/dist/dopyo.css';
import { dopyo } from 'dopyo.js';

Line Chart

Demo

HTML

<div id="linechart"></div>

Javascript

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,
      }
    }
  });
})

Area Chart

Demo

HTML

<div id="areachart"></div>

Javascript

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,
      }
    }
  });
})