ChartJS : 막 대형 차트에서 클릭했을 때 레이블 값 가져 오기

Question

각도 JS에서 막 대형 차트를 클릭하면 레이블 값을 가져오고 싶습니다. 여기

<canvas id="bar" class="chart chart-bar" chart-data="data" 
           chart-labels="labels" chart-legend="true" height="350" 
           chart-series="series" chart-click="onClick"> 
</canvas> 

가 클릭 이벤트에 대한 내 JS이다 : 나는 HTML 템플릿이

이

$scope.onClick = function (points, evt) { 
           console.log("Chart clicked", points, evt); 
           console.log(points); 
           if(points.length > 0){ 
            console.log("Bar chart clicked"); 
            console.log("Point", points[0].value); 

           } 
           }; 

내가하고 싶은 것은 막대 차트를 클릭 할 때 라벨의 값을 표시하는 것입니다, 더 특히 _model -> label의 값을 얻고 싶습니다. 다음은 콘솔에 인쇄되는 내용입니다.

다음 줄 : console.log("Point", points[0].value);는 정의되지 않은 값을 반환합니다.

미리 감사드립니다.

Answer 1

$scope.onClick 콜백에 세 번째 변수를 포함 시키십시오.이 변수는 특정 막대를 클릭 할 때 정의됩니다. 컨트롤러에서

<canvas id="bar" 
     ... other stuff ... 
     chart-click="ctrl.onClick"> 
</canvas> 

: 다음 HTML에서

ctrl.onClick = function(_points, _event, barClicked) { 
    if (barClicked) { 
    var associatedLabel = barClicked._model.datasetLabel; 
    console.log("Label of the bar you clicked is " + associatedLabel); 
    } 
} 

내가 사용하는 바로이 개 콜백 변수를 X 축을 따라 year 당 여러 줄을 렌더링하고 원래되었다

있지만, 모든 _points 내가 클릭 한 해의 모든 차트 요소였습니다. 위의 내용은 제가 클릭 한 정확한 막대를 나타 냈습니다.

ChartJS 문서에서이 항목을 찾을 수 없기 때문에 모든 경우에 적용 할 수 있는지 확실하지 않지만 저에게 놀라운 기사가되었습니다. 건배!