Chart.js 활용하기(다중 그래프,단일 그래프)

상단의 이미지와 같이 바 그래프와 라인그래프를 혼합하는 방식의 Chart.js 활용법 이다.

단일 그래프시 기본 타입만 설정하면 끝이다. (바 그래프 = type:"bar"/라인 그래프 = type:"line")

 

1.html에서 해당 태그를 추가한다(실질적으로 차트가 들어가게 되는 공간에) 

 <canvas id="jsChart"></canvas>

 

 

2.스크립트 부분:

 

//차트 데이터 속성 설정

var chartdata = {
    labels: [],
    datasets: [
        {
            label: "label1",
            lineTension: 0.1,
            borderColor: 'rgba(255, 99, 132, 0.1)',
            backgroundColor: '#2196F3',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            data: [1000,2000,3000]
        }, {
            label: "label2",
            lineTension: 0.1,
            borderColor: 'rgba(255, 199, 132, 0.1)',
            backgroundColor: '#4CAF50',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            data: [1000,2000,3000]
        }, {
            label: "label13",
            type: "line",//다중 그래프이기 때문에 기본 bar타입이 아닌 line타입으로 따로 설정해줌. 단일 그래프시 불필요
            lineTension: 0.1,
            borderColor: 'rgba(255, 204, 255, 0.1)',
            backgroundColor: '#f39c12',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            data: [1000,2000,3000]
        }
    ]
};

 

//차트 옵션 설정(X,Y축)
var chartOptions = {
    scales: {
        xAxes: [
            {
                ticks: {
                    beginAtZero: true
                },
                scaleLabel: {
                    display: true,
                    labelString: "x축 텍스트",
                    fontColor: "red"
                },
                stacked: true
            }
        ],
        yAxes: [
            {
                scaleLabel: {
                    display: true,
                    labelString: "y축 텍스트",
                    fontColor: "green"
                },
                ticks: {
                    // max: 7000,
                    min: 0,
                    // stepSize: 1000,
                    autoSkip: true
                },
                stacked: true
            }
        ]
    },
    responsive: true
};

 

//차트 추가
var ctx = document.getElementById("jsChart");
JsChartBar = new Chart(ctx, {
    type: 'bar',
    data: chartdata,
    options: chartOptions
});

 

 

기타 Chart.js에 대한 참조는 다음 사이트에 들어가서 확인할 수 있다.

www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website