JS 차트

3 minute read

차트 API 이슈

현재 차트를 구현해야하는 상황이 생겼다.

❗구글차트 폐쇄망 로드불가
💡 콘솔창에 에러가 찍힌다.

“https://www.gstatic.com/charts/loader.js” 타임아웃이 발생한다.

운영하던 사이트에 적용되어 있는줄 알았는데 알고보니 이미지로 로드 되고 있었다.

아마 폐쇄망에서 불가능하니까 변경한듯 하다.

💡 참고사이트

https://okky.kr/questions/349984

요약하면 리소스 다운로드 방식이 불가하다고 한다.

💡 공식 구글가이드
https://developers.google.com/chart/interactive/faq
# 오프라인에서 차트를 사용할 수 있나요?    

Google 차트에서 양방향 기능을 사용하려면 사용자 컴퓨터가 https://www.gstatic.com/charts/loader.js에 액세스할 수 있어야 합니다. 이는 페이지에 필요한 시각화 라이브러리가 사용하기 전에 동적으로 로드되기 때문입니다. 적합한 라이브러리를 로드하는 코드는 포함된 스크립트의 일부이며, google.charts.load() 메.> 서드를 호출할 때 호출됩니다. Google 서비스 약관에 따라 google.charts.load 또는 google.> visualization 코드를 다운로드하여 오프라인으로 사용할 수 없습니다.

어떤 API를 사용할까?

리서치

❗자바 서버단에서 처리

💡 jfreechart

http://www.jfree.org/jfreechart/samples.html

💡 zk framework chart

http://www.zkoss.org/zkchartsdemo/line_basic

❗자바스크립트로 클라이언트 단에서 처리

💡 http://www.chartjs.org/

💡 http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks

💡 http://butleranalytics.com/10-free-javascript-graphing-libraries/

❗검색 키워드

💡 javascript chart library open source spring open source chart 이런식으로 검색

무료

❗https://developers.google.com/chart
💡 구글차트-방대한기능. 실무 다수 적용 경험 있음. But 무조건 외부 인터넷망이 가능해야함
💡 예제1) https://developers.google.com/chart/interactive/docs/gallery
💡 예제2) http://private.tistory.com/66

❗ https://www.chartjs.org/
💡 일반적인 차트 그릴때 유용. 단순하고 유연하다고함. 깔끔한 디자인. 간단한 데이터 표현에 최적.
💡 But 확장성은 부족하다는 평.
💡 예제) https://www.chartjs.org/samples/latest/

❗http://jui.io/?lang=ko
💡 제니퍼소프트에서 만든 ui라이브러리
💡 예제) http://chartplay.jui.io/

❗https://ui.toast.com/tui-chart/
💡 nhnent에서 만듬, 차트를 포함한 다양한 콤포넌트가 있음. 부드럽고 반응성 좋음
💡 차트를 포함한 다양한 콤포넌트가 있음
💡 부드럽고 반응성 좋음
💡 예제) https://nhn.github.io/tui.chart/latest/

❗https://c3js.org/
💡 커스터마이징이 쉽다고 함.

❗http://www.jqplot.com/examples/
💡 순수 JavaScript & JQuery 로만 짠 차트
💡 예제) http://www.jqplot.com/examples/multipleBarColors.php

❗https://omnipotent.net/jquery.sparkline/#s-about/
💡 작은 차트 그릴때 유용. 나중에 써먹을 일이 있을것같음.

❗http://tympanus.net/Tutorials/Animated3DBarChart/
💡 3차원 입체 bar차트 Animated 3D Bar Chart with CSS3

❗http://xgfe.github.io/xCharts/
💡 D3 기반 library 차트

❗https://bl.ocks.org/mbostock/3883245
💡 D3 라인차트

❗https://bl.ocks.org/mbostock/3885304
💡 D3 Bar 차트

❗http://d3pie.org/
💡 D3 기반으로한 Pie 전문 차트 라이브러리라고 함.

❗http://jgraph.github.io/mxgraph/javascript/examples/schema.html
💡 웹에서 다이어그램 그릴때 유용

유료)

http://demo.riamore.net/HTML5demo/chart/index.html -> rMate 차트. 국산, HTML5 기반

https://solution.cyber-i.com/products/ui/chart/demo.cmd -> Cyberi 솔루션. 국산. 디테일한 설정과 애니메이션이 잘되어있음.

http://www.amcharts.com/ -> amcharts 로고 있으면 무료. 실무에서 적용 경험 있음. 많은 데이터와(많다는 기준이 애매하지만..) 실시간 Invalidate, 여러 차트 축 동시반응이 잘되었음.

http://www.highcharts.com/demo/ -> 성능좋고 다양하게 구현 가능하기로 유명하며 인기가 많다고함. But 비쌈. 개인에게만 무료

http://www.highcharts.com/stock/demo/ -> HighCharts 주식 차트 예

http://www.fusioncharts.com/demos/business/#management-dashboard -> 부드러운 화면전환이 특징.

Angular, Vue, Ember, Svelte, ASP, PHP, Python 등…

많은 환경에서 지원이 됨

http://www.zkoss.org/zkchartsdemo/line_basic -> zkcharts차트. 상업용 라이센스로 구매해야함

웹에서 JS라이브러리 테스트 방법

STEP1. cdnjs.com 접속 후 원하는 라이브러리 검색

❗접속
https://cdnjs.com/

# 라이브러리 입력하면 ex) 
# cdnjs에서 제공하는 링크가 즉시 나온다.
# 복사한다.

STEP2. 온라인 편집기 테스트

❗1. 접속
https://jsfiddle.net/

❗2. 복사한 cdnjs 의 링크를 Resource 안에 붙여넣기

# ToastUI (1개만 있으면 된다.)
tui-chart-all.min.js  

❗3. 라이브러리 관련 코드 작성

<!DOCTYPE html>
<html>
<head>
    <title>Simple Donut Chart with Chart.js</title>
</head>
<body>
<div id="chart"></div>
</body>
<script>
var container = document.getElementById('chart'),
    data = {
        categories: ['cate1', 'cate2', 'cate3'],
        series: [
            {
                name: 'Legend1',
                data: [20, 30, 50]
            },
            {
                name: 'Legend2',
                data: [40, 40, 60]
            },
            {
                name: 'Legend3',
                data: [60, 50, 10]
            },
            {
                name: 'Legend4',
                data: [80, 10, 70]
            }
        ]
    },
    options = {
        chart: {
            width: 500,
            height: 400,
            title: 'Chart Title'
        },
        yAxis: {
            title: 'Y Axis Title'
        },
        xAxis: {
            title: 'X Axis Title'
        }
    };

tui.chart.barChart(container, data, options);
</script>
</html>

Chart.js

STEP1. 라이브러리 준비

Chart.min.js

STEP2. 코드

<!DOCTYPE html>
<html>
<head>
    <!--CDN 방식-->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart. min.js"></script>
    <title>Simple Donut Chart with Chart.js</title>
</head>
<body>
    <canvas id="myDonutChart" width="50" height="50"></canvas>
    
    <script>
        // 데이터 준비
        const data = {
            labels: ['Red', 'Blue', 'Yellow', 'Green'],
            datasets: [{
                data: [30, 50, 20,10,15],
                backgroundColor: ['red', 'blue', 'yellow']
            }]
        };

        // 도넛 차트 생성
        const ctx = document.getElementById('myDonutChart').getContext('2d');
        const myDonutChart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: {
                // 추가적인 설정 옵션을 필요에 따라 설정할 수 있습니다.
            }
        });
    </script>
</body>
</html>

Toast.js

STEP1. Contents Delivery Network (CDN) 사용하기

<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />

<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>

❗리소스로 받기
💡 우클릭 > 다른이름으로저장

Share on

Twitter Facebook LinkedIn