[TIL] Chart.js Mouse Over Error : November 20, 2020

Mouse Over Error

Chart.js를 이용하여 데이터 차트 생성 후에 데이터를 수정할 경우 정상적으로 출력되는 것으로 보이지만 이전 데이터가 있던 위치에 마우스 오버를 하면 이전 데이터가 출력되는 현상이 있다.

나만 겪고 있는 현상은 아니였고, 이를 해결하기 위해 삽질을 시작해봐야겠다.

Try

데이터 차트 chart0과 chart0_1이 존재할 경우 해당 차트를 Destroy()하는 방법을 적용해보자.

Code

function chart_search_total(grade1, grade2, grade3, grade4, grade5, spend1, spend2, spend3, spend4, spend5)
{
    console.log(chart0);
    console.log(chart0_1);

    if((chart0 != undefined) && (chart0_1 != undefined))
    {
        chart0.destroy();
        chart0_1.destroy();
    }
    
    var ctx0 = document.getElementById('totalChart').getContext('2d');
    var ctx0_1 = document.getElementById('totalChart_1').getContext('2d');

    var data0 = {
        // The type of chart we want to create
        title: "Monthly Grade Variation",
        type: 'line',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Search",
                    backgroundColor: 'rgb(153, 0, 153)',
                    fill:false,
                    borderColor: 'rgb(153, 0, 153)',
                    lineTension:0.25,
                    data: [grade1, grade2, grade3, grade4, grade5],
                },
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Grade Variation',
                fontSize: 20
            },
            //responsive: false,
            scales: {
                yAxes: [{
                    ticks: {
                        reverse: true,
                        min: 1,
                        max: 9
                    }
                }]
            }
        }
    }

    var data0_1 = {
        // The type of chart we want to create
        title: "Monthly Spending Variation",
        type: 'bar',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Spending",
                    backgroundColor: 'rgb(204, 102, 204)',
                    fill:false,
                    borderColor: 'rgb(204, 102, 204)',
                    lineTension:0.25,
                    data: [spend1, spend2, spend3, spend4, spend5],
                }
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Spending Variation',
                fontSize: 20
            },
        }
    }

    var chart0 = new Chart(ctx0, data0);
    var chart0_1 = new Chart(ctx0_1, data0_1);
    
}

무엇이 문제인지 정상적으로 동작하지 않는다. 왜 console.log()를 해봐도 chart0와 chart0_1의 내용이 undefined로 표현되는걸까

Solution

답은 가까이 있었다.
chart_search_total 함수 내에 chart0, chart0_1 변수를 매번 새로 선언하니 당연히 다음 Chart가 생성될 때 마다 해당 변수가 새로 생성되는 것이다.
이를 해결하기 위해 chart0, chart0_1 변수를 전역 변수로 선언하고, 다음 차트를 생성할 때는 해당 전역 변수를 참조하여 차트를 생성한다.

Code

var chart0;
var chart0_1;

function chart_search_total(grade1, grade2, grade3, grade4, grade5, spend1, spend2, spend3, spend4, spend5)
{
    console.log(chart0);
    console.log(chart0_1);

    if((chart0 != undefined) && (chart0_1 != undefined))
    {
        chart0.destroy();
        chart0_1.destroy();
    }
    
    var ctx0 = document.getElementById('totalChart').getContext('2d');
    var ctx0_1 = document.getElementById('totalChart_1').getContext('2d');

    var data0 = {
        // The type of chart we want to create
        title: "Monthly Grade Variation",
        type: 'line',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Search",
                    backgroundColor: 'rgb(153, 0, 153)',
                    fill:false,
                    borderColor: 'rgb(153, 0, 153)',
                    lineTension:0.25,
                    data: [grade1, grade2, grade3, grade4, grade5],
                },
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Grade Variation',
                fontSize: 20
            },
            //responsive: false,
            scales: {
                yAxes: [{
                    ticks: {
                        reverse: true,
                        min: 1,
                        max: 9
                    }
                }]
            }
        }
    }

    var data0_1 = {
        // The type of chart we want to create
        title: "Monthly Spending Variation",
        type: 'bar',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Spending",
                    backgroundColor: 'rgb(204, 102, 204)',
                    fill:false,
                    borderColor: 'rgb(204, 102, 204)',
                    lineTension:0.25,
                    data: [spend1, spend2, spend3, spend4, spend5],
                }
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Spending Variation',
                fontSize: 20
            },
        }
    }

    chart0 = new Chart(ctx0, data0);
    chart0_1 = new Chart(ctx0_1, data0_1);
    
}

End

간단하지만 어렵고 멍청한 접근으로 일을 힘들게 하는 것 같다.
머리좀 써야겠다.