Grafana Business Charts Tooltip 가이드

 

툴팁의 항목을 정렬해서 표시하는 코드를 알려드립니다.

 

• 적용 전 / 후의 모습입니다.

 

 

• tooltip 옵션의 코드를 아래와 같이 수정합니다.

tooltip: {
  trigger: "axis",
  formatter: function (params) {
    // 수치를 천 단위로 변환하는 함수
    const formatNumber = num => {
      if (num == null || isNaN(num)) return '-';
      return num.toLocaleString();  // 또는: String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    };

    const sortedParams = params.slice().sort((a, b) => {
      const aVal = a.data != null ? a.data : -Infinity;
      const bVal = b.data != null ? b.data : -Infinity;
      return bVal - aVal;
    });

    let text = `${params[0].axisValue}<br/>`;
    sortedParams.forEach(param => {
      text += `
        <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>
        ${param.seriesName}: ${formatNumber(param.data)}<br/>
      `;
    });
    return text;
  }
}