Hospital Admin Chart FE

똑닥 병원어드민에서 쓰인 D3 기반 차트를 만들 때 사용된 프로젝트 이다.

Getting Started

개발 및 테스트 진행 시 아래 명령어로 수행 한다.

npm start

그리고 웹브라우저에서 localhost:8080 주소로 접근 한다. 만약 IE 에서 Security 오류가 난다면 다음과 같이 수행.

• 인터넷 옵션 > 보안 > 로컬 인트라넷 > 사이트 > 고급
• http://localhost, ws://localhost 추가
• IE 재시작

How to Use

문서구조

<div id="line-chart"></div>

사용 데이터 구조

export const data = {
  "categories": {
    "class1": {
      "data": [
        {
          "date": new Date(2018, 12, 1),
          "value": 50
        },
        {
          "date": new Date(2018, 12, 2),
          "value": 30
        },
        {
          "date": new Date(2018, 12, 3),
          "value": 25
        },
      ],
      "title": "1반",
      "color": "1"
    }
  },
  "legend": ["class1"]
};

스크립트

import d3 from 'd3';
import { createLineChart } from 'hospital-admin-chart-fe';
import { data } = from './data';

const chart = createLineChart(d3, '#line-chart');

chart.setData(data);

더 자세한건 프로젝트 내 test/app.js 내용을 참고.