사용자 지정 Chart.js 범례 스타일 만들기

모르는 사람들을 위해 chart.js, 그것은 javascript 차트 라이브러리입니다.

데이터 시각화를 생성하기 위해 라이브러리를 사용하는 것은 해당 라이브러리에서 제공하는 예제 및 스타일 이외의 것을 원할 때 약간 어려울 수 있습니다.
도넛 차트 스타일을 사용자 지정하기 위해 많은 노력을 기울였을 때 이 게시물을 만들기로 결정했습니다. 해당 차트에 대한 사용자 지정 범례 스타일을 사용해야 했기 때문입니다.

다음은 사용자 지정 스타일 없이 만들 수 있는 것입니다.



따라서 documentation 에 깊숙이 들어가면 차트에 HTML 범례를 삽입할 수 있는 legendCallback 옵션이 있으며 이는 chart.js에서 generateLegend() 함수를 호출하면 렌더링됩니다.
내 legendCallback은 다음과 같습니다.

legendCallback: (chart) => {
        const renderLabels = (chart) => {
          const { data } = chart;
          return data.datasets[0].data
            .map(
              (_, i) =>
                `<li>
                    <div id="legend-${i}-item" class="legend-item">
                      <span style="background-color:
                        ${data.datasets[0].backgroundColor[i]}">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                      </span>
                      ${
                        data.labels[i] &&
                        `<span class="label">${data.labels[i]}: $${data.datasets[0].data[i]}</span>`
                      }
                    </div>
                </li>
              `
            )
            .join("");
        };
        return `
          <ul class="chartjs-legend">
            ${renderLabels(chart)}
          </ul>`;
      },

여기에서는 데이터세트의 모든 요소를 ​​통해 매핑하고 배경색과 레이블(이전에 차트 옵션 개체 내에서 정의됨)을 가져옵니다.

이 HTML + 일부 CSS를 사용하여 다음과 같은 것을 생성할 수 있습니다.



예! 작업 완료!
... 실제로는 그렇지 않습니다 ;)

무엇?

예, 이 시점까지는 범례 스타일이 있지만 클릭하면 차트에 아무 일도 일어나지 않습니다. 기본 범례를 사용하는 것처럼 데이터 애니메이션을 제외할 필요가 없습니다.



각 범례에 대한 클릭 이벤트 리스너를 만들어야 합니다.

const legendItemSelector = ".legend-item";
  const labelSeletor = ".label";

  const legendItems = [
    ...containerElement.querySelectorAll(legendItemSelector)
  ];
  legendItems.forEach((item, i) => {
    item.addEventListener("click", (e) =>
      updateDataset(e.target.parentNode, i)
    );
  });

그런 다음 클릭한 범례의 데이터(이getDatasetMeta 함수에서 사용 가능)의 현재 상태에 따라 차트에서 해당 데이터를 숨기거나 표시할 수 있습니다.

const updateDataset = (currentEl, index) => {
    const meta = myChart.getDatasetMeta(0);
    const labelEl = currentEl.querySelector(labelSeletor);
    const result = meta.data[index].hidden === true ? false : true;
    if (result === true) {
      meta.data[index].hidden = true;
      labelEl.style.textDecoration = "line-through";
    } else {
      labelEl.style.textDecoration = "none";
      meta.data[index].hidden = false;
    }
    myChart.update();
  };

함께 보면 다음과 같습니다.

export const bindChartEvents = (myChart, containerElement) => {
  const legendItemSelector = ".legend-item";
  const labelSeletor = ".label";

  const legendItems = [
    ...containerElement.querySelectorAll(legendItemSelector)
  ];
  legendItems.forEach((item, i) => {
    item.addEventListener("click", (e) =>
      updateDataset(e.target.parentNode, i)
    );
  });

  const updateDataset = (currentEl, index) => {
    const meta = myChart.getDatasetMeta(0);
    const labelEl = currentEl.querySelector(labelSeletor);
    const result = meta.data[index].hidden === true ? false : true;
    if (result === true) {
      meta.data[index].hidden = true;
      labelEl.style.textDecoration = "line-through";
    } else {
      labelEl.style.textDecoration = "none";
      meta.data[index].hidden = false;
    }
    myChart.update();
  };
};

이제 클릭하여 chart.js 애니메이션을 볼 수 있습니다.



이 게시물은 사용자 지정 스타일에 더 초점을 맞추고 있으므로 chart.js 차트를 만들고 작동시키는 방법이 궁금하시다면 여기에서 살펴볼 수 있는 예를 살펴보세요 😄



다음 포스트에서 만나요! 즐기 셨으면 좋겠습니다.