Chartjs에서 동적 색상을 추가하는 방법

각 데이터세트의 색상 값을 하드코딩하는 데 어려움을 겪고 있고 데이터세트에 새 항목이 있을 때마다 코드가 중단되는 경우 이 문서가 적합합니다.

최근 저는 React에서 chartjs로 작업했습니다. 새 데이터가 채워질 때마다 해당 레이블 및 데이터에 대한 새 색상 값을 수동으로 추가해야 했습니다. 인터넷에서 약 1.5시간을 보낸 후 마침내 chartjs에서 동적으로 색상을 추가하는 솔루션을 찾았습니다.

프로젝트 설정

참조용으로 이 파일repo을 설정했으므로 yarn install && yarn run를 실행하여 프로젝트를 시작하고 재생을 시작하면 됩니다.

설명

이 놀라운article 다음으로 D3의 Chromatic 색상 스케일을 사용하여 차트에 대한 동적 색상 범위를 생성할 것입니다. D3의 Scale Chromatic 라이브러리는 많은 색상 스케일을 제공하며 보간 색상 스케일을 사용했습니다. 모든 보간 색상 스케일에는 [0, 1]의 도메인이 있습니다. 더 깊이 알고 싶다면 이 놀라운article을 확인하십시오. 단순화하기 위해 함수를 만들었습니다chartData().
chartData()는 차트 구성 요소에 전달할 수 있는 데이터 개체를 반환합니다. 이 함수는 labels , colorRangeInfo , scale 및 dataLabel를 포함하는 데이터 개체를 허용합니다.

chartData({
    labels: ["China", "UAE", "Yemen", "Pakistan", "Saudia"],
    colorRangeInfo: {
    colorStart: 0,
    colorEnd: 1,
    useEndAsStart: false,
    },
    scale: d3.interpolateBlues,
    dataLabel: "data for doughnut chart",
})

레이블 : 레이블로 표시될 데이터 레이블 목록을 허용합니다.
colorRangeInfo() : d3 색채 범위(0,1)를 포함하는 객체를 허용합니다. useEndAsStart : true이면 색상 범위를 반전시킵니다.

const colorRangeInfo = {
    colorStart: 0,
    colorEnd: 1,
    useEndAsStart: false,
};

scale 속성은 다음과 같은 다양한 조합을 제공하는 d3.interpolate를 허용합니다.
interpolateIferno


보간쿨


다른 보간 색상 스케일을 사용하여 다양한 변형을 가지고 놀 수 있습니다.

이 기사가 도움이 되었다면 의견을 공유해 주십시오. 이에 대한 더 나은 솔루션이 있다면 여러분의 답변을 듣고 싶습니다.