통합

Chart.js는 일반 자바스크립트 또는 다른 모듈 로더와 통합될 수 있습니다. 아래의 예제는 다른 시스템에서 Chart.js를 로드하는 방법을 보여줍니다.

스크립트 태그

<script src="path/to/chartjs/dist/Chart.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

Common JS

var Chart = require('chart.js');
var myChart = new Chart(ctx, {...});

번들러 (웹팩, 롤업 등.)

import Chart from 'chart.js';
var myChart = new Chart(ctx, {...});

참고 사항: Moment.js는 Chart.js에 종속되어 설치됩니다. 만약 Moment.js를 사용하고 싶지 않다면(다른 날짜 어댑터를 사용하거나 단순히 시간 기능이 필요하지 않다면), 번들의 설정에서 이 종속을 배제해야합니다 (예를 들어: 웹팩의 external 또는 롤업의 external).

// 웹팩
{
    externals: {
        moment: 'moment'
    }
}

// 롤업
{
    external: {
        ['moment']
    }
}

Require JS

중요 사항: RequireJS는 CommonJS를 그대로 로드할 수 없으므로, UMD 빌드 중 하나가 필요합니다 (즉, dist/Chart.js, dist/Chart.min.js, 등.).

require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});

참고 사항: v2.8부터, Moment.js는 Chart.js와 Chart.min.js에서 선택적 종속 사항입니다. Moment.js와 함께 시간 척도를 사용하기 위해선, Chart.js를 로드하기 전에 Moment.js를 완전히 로드해야합니다. 심을 사용할 수도 있습니다:

require.config({
    shim: {
        'chartjs': {
            deps: ['moment']    // charjs 전에 로드를 실행
        }
    },
    paths: {
        'chartjs': 'path/to/chartjs/dist/Chart.min.js',
        'moment': 'path/to/moment'
    }
});

require(['chartjs'], function(Chart) {
    new Chart(ctx, {...});
});

또는 단순히 중첩된 require()를 사용하세요:

require(['moment'], function() {
    require(['chartjs'], function(Chart) {
        new Chart(ctx, {...});
    });
});

콘텐츠 보안 정책

기본적으로, Chart.js는 DOM 안에 CSS를 직접 주입합니다. 콘텐츠 보안 정첵(CSP)을 사용하여 보안이 설정된 웹페이지의 경우, style-src 'unsafe-inline'을 허용해야만 합니다. style-src 'self'만 호용되는 업격한 CSP 환경의 경우, 다음의 CSS 파일을 페이지에 수동으로 추가해야 합니다::

<link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css">

첫번째 차트를 만들기 전에 스타일 주입을 해제해야 합니다:

// 자동 스타일 주입 비활성화
Chart.platform.disableCSSInjection = true;