[Vuejs] chartjs 오류(NS_ERROR_FAILURE, chart.js, vue-chartjs)

 

뷰 환경에서 무료 라이센스 차트의 최강자인 차트js를 설치 해 보았습니다.

물론 처음 개발을 하기에..가장 최신버전으로 설치를 하였습니다.

  * 23년도 4월 기준으로 아래 버전으로 설치 하였습니다.

{
    "chart.js": "^4.2.1",
    "vue-chartjs": "^5.2.0"
}

 

워낙 훌륭한 차트답게 사용법도 쉽고 레퍼런스가 많아서 적용하는 데 문제는 없었습니다.

바, 선형, 원형 등 기존의 chartjs에서 제공하는 모든 차트를 사용 가능 하였으며, 사용법과 옵션도 거의 비슷 했습니다.

https://vue-chartjs.org/

📈 vue-chartjs

 

그런데 차트 1개를 컴포넌트에서 사용 할 때는 아무런 이상이 없었지만, 2개 이상의 차트를 화면에서 표출하는 경우에 아래와 같은 오류가 발생 하였습니다.

에..뭐..먼소리???

 

이를 해결하기 위해 여러 내용을 찾아 보았고, 그리고 혹시나 샘플 코드가 있나 싶어 검색을 하여 보았지만 샘플들 또한 차트 1개만을 컴포넌트에 보여주는 예제가 많았습니다.

물론 단순하게 차트 1개만 컴포넌트에서 보여주면 될 일이지만..사용자의 요구사항은 알 수 없기에 해당 문제를 해결하기 위한 방법이 필요 하였습니다.

 

#1. 버전 다운그레이드

아무리 이곳저곳 뒤져보아도..이러한 내용의 오류나 이슈, 해결방법은 보이지를 않았습니다.

가장 단순한 방법은 4.1.2 이하 버전으로 "vue-chartjs" 버전을 낮추는 것 입니다.

마찬가지로 "chart.js" 버전도 3 이하 버전으로 낮추어 줍니다.

이렇게 버전을 낮추면 사용하는 옵션과 파라미터 값이 조금 상이하므로 해당 내용을 검색해서 적용 해야 합니다.

{
    "chart.js": "^3.0.0",
    "vue-chartjs": "^4.1.2"
}

 

#2. responsive 옵션이 true 이지만 같은 영역이 아닌 구분된 영역을 생성 // responsive 옵션을 false 로 부여

버전을 낮추는 것도 있지만 해당 버전을 그대로 사용하려면 아래처럼 차트의 영역을 서로 구분지어야 합니다.

이때 responsive 옵션을 true로 주어도 문제는 발생하지 않습니다.

* 영역을 나누어 준 방법 : 올바르게 동작 합니다.

<template>
    <div style="display: flex;flex-direction: column;">
        <div>
            <Line :options="옵션데이터" :data="라인데이터" />
        </div>
        <div>
            <Bar :options="옵션데이터" :data="바데이터"/>
        </div>
    </div>
</template>

 

위 사진처럼 영역을 구분지어 주면 아무런 문제가 없습니다.

그러나 차트를 나열 하였는데 responsive 옵션이 true 인 경우  "NS_ERROR_FAILURE" 오류가 발생하게 됩니다.

* 영역을 나누지 않고 responsive 옵션을 true로 한 뒤 나열한 방법 : 오류가 발생 합니다.

<template>
	<Line :options="옵션데이터" :data="라인데이터" />
	<Bar :options="옵션데이터" :data="바데이터"/>
</template>

넓이와 높이가 대박냠냠....

 

차트를 n개이상 사용하는 경우에 이러한 문제에 대해서 대비해야 된다는 내용이 없어서..

단순하게 나열 하려면 반드시 responsive 값을 false로 부여하고 width와 height 속성을 부여 해 주어야 합니다.

아니면 responsive 값을 true 로 사용 한다면 반드시 서로 다른 영역에 존재하도록 style을 확인하여야 합니다.

아래 간단한 코드를 첨부 합니다.

<script>
import { Bar, Line} from 'vue-chartjs'
export default {
    components: { Bar, Line},
    data() {
        return {
            chartBarData: {
                labels: ['A', 'B', 'C'],
                datasets: [
                    {
                        label: 'sample Data',
                        backgroundColor: '#f87979',
                        data: [40, 20, 12]
                    }
                ]
            },
            chartLineData: {
                labels: ['A', 'B', 'C', 'D'],
                datasets: [
                    {
                        label: 'Data One',
                        backgroundColor: '#f87979',
                        data: [40, 39, 10, 40]
                    }
                ]
            },
            chartOptions: {
                responsive: true,   //요기 주의!!!!!!!!
                maintainAspectRatio: false,
                cutoutPercentage: 80,
                legend: {
                    display: false
                },
                tooltips: {
                    enabled: false
                },
                hover: {
                    mode: false
                }
            },
        }
    }
}
</script>
<template>
    <div style="display: flex;flex-direction: column;">
        <div style="border: 1px solid white; margin-bottom: 1rem;">
            <LineView :options="chartOptions" :data="chartLineData" />
        </div>
        <div style="border: 1px solid white;">
            <BarView :options="chartOption" :data="chartBarData"/>
        </div>
    </div>
</template>

 

vue-chartjs 5.0.1 ~ 5.2.0 버전에서 보이는 이슈이므로 해당 이슈가 다음 버전에서 해결 될 수도 있겠습니다.

vuejs에서 chartjs 오류인 NS_ERROR_FAILURE 오류가 발생하면 위 문제 여부를 확인하여 보세요!

다른 의견 또는 틀린부분은 언제든 말씀하여 주세요! 👻