그룹화 된 막 대형 차트는 chart.js의 각 그룹에 대해 서로 다른 레벨을 차트로 표시합니다.

Question

char. JS 막대 차트, 첫 번째 그룹의 자동차 데이터 (연료, EMI, 서비스), 각 그룹에서는 그룹 개별 라벨을 분리하는 개별 레이블을 가진

let randomScalingFactor = function(){ return Math.round(Math.random()*5000)}; 
    return { 
     labels: ["car","Recharge","Food","May","June","July"], 
     datasets : [ 
      { 
       fillColor : 'rgba(220,220,220,0.8)', 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()], 
     labels: ["fuel","Emi","service"], 
      }, 
     { 
       fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ], 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()], 
     labels: ["DTH","postpaid","prepaid"], 
      }, 
      { 
       fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ], 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],label: 'sadf' 
      } 

     ]   
    } 

그녀의 심판이 이미지

Answer 1

이유는 도구 설명을 볼 수 없습니다 label은 잘못된 라벨 구성 옵션을 사용했기 때문입니다. 이 옵션은 label이 아니며 labels이 아니며 단일 문자열 (문자열 배열 아님) 만 허용합니다. label에 문자열 배열을 전달하면 chart.js는 배열의 각 인덱스에 대해 쉼표로 구분 된 문자열을 간단히 어셈블합니다.

그렇다면 내가하려는 것을 볼 수는 있지만 불행히도 Chart.js를 사용하여이를 수행 할 방법이 없습니다. 데이터 집합은 항상 각 범주 레이블 당 데이터 값을 나타냅니다. 즉, 데이터 집합의 각 인덱스 data 배열은 labels 배열의 동일한 인덱스 (데이터 집합 외부에서 정의 됨)에 매핑됩니다.

여기 내 뜻을 나타내는 codepen입니다.

각 데이터 세트는 모든 카테고리 (라벨)에 걸쳐 있습니다. '자동차'에 대한 3 개의 데이터 세트, '재충전'에 대한 3 개의 데이터 세트 등을 가질 수 없습니다. 할 수있는 최선의 방법은 데이터 세트가 속하지 않는 카테고리에 대해 0 값을 설정하는 것이지만 그래프를 상당히 나타납니다 혼란 스럽다.

여기에 그 것을 나타내는 example이 있습니다.