[javascript] Chartist에서 차트의 데이터 재사용성 관리하기
Chartist는 간단하고 사용하기 쉬운 자바스크립트 차트 라이브러리입니다. 하지만 가끔 차트를 여러 곳에서 재사용해야 할 때가 있고, 각각의 차트가 다른 데이터셋을 가지고 있을 수도 있습니다. 이런 상황에서는 어떻게 데이터를 관리해야 할까요?
데이터 관리를 위한 객체 생성하기
각각의 차트는 독립적인 데이터셋을 가지고 있어야 합니다. 따라서 데이터를 관리하기 위해 객체를 생성하는 것이 좋습니다. 예를 들어, 다음과 같이 객체를 생성하여 데이터를 관리할 수 있습니다.
const chartData = {
chart1: {
labels: ['Jan', 'Feb', 'Mar'],
series: [200, 300, 150]
},
chart2: {
labels: ['A', 'B', 'C'],
series: [500, 400, 300]
}
};
각각의 차트는 chart1, chart2와 같은 고유한 키를 가지고 있으며, 그 안에는 labels와 series라는 배열이 있습니다.
차트 생성 함수 작성하기
이제 차트를 생성하는 함수를 작성해보겠습니다. 차트 생성 함수는 첫 번째 파라미터로 차트를 그릴 요소의 ID와 데이터의 키를 전달받습니다. 그리고 해당 요소와 데이터를 사용하여 차트를 생성합니다.
function createChart(elementId, dataKey) {
const chartElement = document.getElementById(elementId);
const chartOptions = {
labelInterpolationFnc: function(value) {
return value[0];
}
};
const chartData = chartData[dataKey];
new Chartist.Pie(chartElement, chartData, chartOptions);
}
위의 함수를 사용하면 다음과 같이 차트를 생성할 수 있습니다.
createChart('chart1', 'chart1');
createChart('chart2', 'chart2');
결과
이제 각각의 차트는 독립적인 데이터셋을 사용하면서 재사용될 수 있게 되었습니다. 데이터를 관리하기 위해 객체를 생성하고, 차트 생성 함수를 사용하여 각각의 차트를 그릴 수 있습니다.
Chartist를 사용하여 차트의 데이터 재사용성을 관리하는 방법에 대해 알아보았습니다. 이를 통해 더욱 유연하고 관리하기 쉬운 차트를 구현할 수 있을 것입니다.