반응형
Gafana 에서 Business Charts를 사용하는 방법을 알려드립니다.
0. legend / xvalue / yvalue 컬럼으로 이루어진 데이터를 준비합니다.
1. Business Charts 를 선택 > Editor Mode를 Visual로 선택합니다.
2. 아래 JavaScript 코드를 Visual Editor 탭의 Function에 붙여넣어 줍니다.
코드에 대한 설명은 주석을 참고하시거나 ChatGPT에 코드를 붙여넣은 후 프로프트로 코드 수정을 질문하시면 꽤 정확한 답변을 얻으실 수 있습니다.
const dataMap = {}; // 전체 데이터
const xLabelsSet = new Set(); // X축 라벨값 집합
// 데이터 집합을 생성합니다.
context.panel.data.series.forEach((series) => {
const legendField = series.fields.find(f => f.name.toLowerCase().includes("legend")); // 범례
const xValueField = series.fields.find(f => f.name.toLowerCase().includes("xvalue")); // X 축
const yValueField = series.fields.find(f => f.name.toLowerCase().includes("yvalue")); // Y 축
if (!legendField || !xValueField || !yValueField) return;
const legends = legendField.values;
const xValues = xValueField.values;
const yValues = yValueField.values;
for (let i = 0; i < legends.length; i++) {
const legend = legends.get(i);
const xValue = xValues.get(i);
const yValue = yValues.get(i);
xLabelsSet.add(xValue);
if (!dataMap[legend]) {
dataMap[legend] = {};
}
dataMap[legend][xValue] = yValue;
}
});
// X축에 표시할 Unique 라벨 배열
const xLabels = Array.from(xLabelsSet).sort((a, b) => a - b);
// 시리즈 생성
const series = Object.keys(dataMap).map(legend => {
const xValueMap = dataMap[legend];
const yValueMap = xLabels.map(xValue => xValueMap[xValue] ?? null);
return {
name: legend, // 범례에 속한 항목 이름
type: "line", // 차트 타입(bar, line)
stack: "",
data: yValueMap // Y Value 데이터 배열
};
});
return {
grid: {
top: "30%",
bottom: "5%", // 그래프 하단의 여백을 설정하는 효과가 있습니다.
containLabel: true,
left: "3%",
right: "4%"
},
tooltip: {
trigger: "axis"
},
legend: { // 범례 설정
type: 'plain', // plain, scroll
name: '모델',
data: Object.keys(dataMap),
orient: 'horizontal', // 수평 정렬
top: 'top',
left: 'center',
itemGap: 10, // 범례 항목 간 간격
padding: [10, 20], // 범례 영역 안쪽 여백
width: '80%', // 너비 제한을 주면 줄바꿈 발생 가능
textStyle: {
fontSize: 14
}
},
xAxis: { // x축 설정
name: '', // 축 이름 텍스트.
nameLocation: "middle", // "start", "middle", "end" 가능. 이름의 위치 지정.
nameGap: 30, // 축 이름과 축 간의 거리(px)
nameTextStyle: { // 폰트 크기, 두께 등 스타일 설정
fontSize: 20,
fontWeight: 'bold'
},
boundaryGap: true,
type: "category",
data: xLabels,
axisLabel: {
fontSize: 14,
rotate: 60, // 라벨을 45도 기울임
interval: 0 // 모든 항목 출력 (스크롤 지원에 필수)
}
},
yAxis: { // y축 설정
name: '판매량',
nameTextStyle: {
fontSize: 14,
fontWeight: 'bold'
},
type: "value",
interval: 100000 // 10 단위 간격 설정
},
series,
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: 0,
start: 0,
end: xLabels.length > 20 ? 50 : 100
}
],
graphic: [
{
type: 'text',
left: 'left',
bottom: '20', // 'bottom'은 grid 바깥 기준이므로, 그래프 아래 적당한 픽셀 위치로 설정
left: '70', // 좌측 여백을 설정합니다.
}
]
};
3. 그래프의 출력 결과는 아래와 같습니다.
반응형