퀄리티 좋은 무료차트 billboard.js

D3 v4 +를 기반으로 재사용 가능한 쉬운 인터페이스 JavaScript 차트 라이브러리입니다.

무료차트(MIT license)이면서 퀄리티가 유료차트인 하이차트만큼 괜찮은거 같습니다.

 billboard.js

https://github.com/naver/billboard.js

지원하는브라우저

익스플로러	크롬	파이어폭스	사파리	iOS	Android
9+	O	O	O	8+	4+

사용방법

1. d3.v4.min.js, billboard.js, billboard.css 세개 파일을 경로에 맞게 인크루드 시켜줍니다.

<!-- Load D3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
 
<!-- Load billboard.js with base style -->
<link rel="stylesheet" href="billboard.css">
<script src="billboard.js"></script>

2. 차트를 표시할 영역을 만듭니다.

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

3. 차트를 생성하는 코드를 삽입합니다.

bb.generate({
    bindto: "#chart",
    data: {
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ],
        types: {
          data1: "line",
          data2: "area-spline"
        },
        colors: {
          data1: "red",
          data2: "green"
        }
    }
});

결과화면

예제화면들

line chart 모양 

Spline chart 모양 

Area chart 모양

Bar chart 모양

Donut chart 모양

가운데 글자삽입도 가능하군요 일반pie chart 도 물론있습니다.

Gauge chart 모양

실시간 모니터링등 데이터를 시각화하는데 유용할거 같습니다.

보시는거와 같이 쉬운사용방법과 다양한 예제

API도 정리가 잘 되어있어서 수정도 용이합니다.