ChartJS의 막 대형 차트에서 각 막대마다 다른 라벨을 얻으려면 어떻게해야합니까?

Question

지난 몇 주 동안 ChartJS에서 일해 왔지만 익숙해 져 가고 있습니다.하지만 바클 라트의 바에 개별 라벨을 추가하려고합니다. 알아낼 수 없습니다.

아래 코드는 제가 사용하고있는 코드입니다.

var config = { 
    type : 'bar', 
    data : { 
     datasets : [ { 
      label: numberOfFailures, //This line is the problem 
      data : failureData, 
      backgroundColor : colours, 

     } ], 
     labels : labels 
    }, 
    options : { 
     responsive : true, 
     legend : { 
      position : 'bottom' 
     } 
    } 
}; 

레이블로 단어 레이블을 변경하면 레이블이 전혀 표시되지 않지만 레이블로 표시되면 레이블이 모두 함께 표시됩니다. 원하는 것은 배열 요소 1이 막대 1 등에 표시되는 것입니다.

Answer 1

배열에서 값을 가져 와서 가로 막 대형 차트의 아래쪽에 표시되도록하여 각 배열 값이 레이블 막대의 경우 data.datasets.label 값이 아닌 data.labels 값을 설정해야합니다.

예를 들어이 기본 차트는 the Chart.js documentation for bar chart data structure에서 가져 와서 막대 이름에 월 이름 배열을 사용하는 방법을 보여줍니다. 레이블 막대는 data.labels 노드로 이동합니다. 당신은 레이블과 데이터 값을 만들 필요가 없습니다

var chartConfig = {}; 

for (score = 0; score < maxScore; ++score) { 
    chartConfig.scoreLabels[score] = score; 
    chartConfig.scoreData[score] = howManyAchievedScore(score); 
} 

var data = { 
    labels: chartConfig.scoreLabels, 
    datasets: [ 
     { 
      label: "Number of players who achieved score", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: chartConfig.scoreData, 
     } 
    ] 
}; 

: 프로그래밍 방식으로 데이터의 각 포인트에 대한 하나 개의 레이블 배열을 만드는 경우

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 

다음은 다음과 같이 표시 될 수 있습니다 단일 객체 내부에 있지만 차트 구성 데이터를 하나의 객체로 그룹화하여 하나의 매개 변수로 한 함수에서 다른 함수로 전달할 수있는 경우에는 일반적으로 더 정교합니다.

data.datasets.label 값은 차트 범례에 나타나는 텍스트와 막대 위에 마우스를 가져갈 때 나타나는 툴팁을 제공합니다.