공식 사이트

사전 준비

플러그인 로드

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

이용방법

<canvas id="ChartDemo" width="400" height="400"></canvas>

기본 기술 방법

<script>
//htmlタグの設定したIDを取得
var ctx = document.getElementById("ChartDemo");
//グラフを描画
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定 (line,bar,rader,polarArea,pie,doughnut,bubble)
    type: 'line',
    //描画するグラフのデータを設定
    data: {
　　　　　//X軸のラベル設定
        labels: ["...", "...", "..."],
　　　　　//仰臥するデータの細かな設定
        datasets: [
        　{
          //ここに細かなデータの設定を記述
        　}
    　]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>

꺾은선형 차트를 작성하는 방법

<script>
var ctx = document.getElementById("ChartDemo");
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定(折れ線グラフ)
    type: 'line',
    //描画するグラフのデータを設定
    data: {
　　　　　//X軸のラベル
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
        　{
            //凡例
            label: "My First dataset",
            //折れ線グラフとX軸の間に色を描画するか否か
            fill: false,
            //背景色
            backgroundColor: "rgba(75,192,192,0.4)",
            //境界線の色
            borderColor: "rgba(75,192,192,1)",
            //点の色
            pointBorderColor: "rgba(75,192,192,1)",
            //点のサイズ
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointRadius: 1,
            //点にマウスオーバーした時の設定
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            //グラフの数値            
            data: [65, 59, 80, 81, 56, 55, 40],
        　}
    　]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>

막대 그래프를 작성하는 방법

<script>
var ctx = document.getElementById("ChartDemo");
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定(棒グラフ)
    type: 'bar',
    //描画するグラフのデータを設定
    data: {
        //X軸のラベル
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            //背景色指定(各グラフ毎)
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            //棒グラフの外枠線の色指定(グラフ毎)
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            //線の太さを指定(px)
            borderWidth: 1,
            //グラフの数値
            data: [65, 59, 80, 81, 56, 55, 40],
        }]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>