누적 막 대형 차트의 상단 또는 하단에 사용자 정의 레이블 추가

Question

chartjs github 페이지에있는 사람들의 도움을 받아 그룹 형 누적 막 대형 차트가 있습니다. 구현이 훌륭하고 내가 원하는 차트 유형을 구축하는 데 도움이되었습니다. 지금 추가하려는 것은 각 스택의 의미를 나타내는 레이블입니다. 여기

내가 진행 가지고있는 JS 바이올린입니다 : http://jsfiddle.net/4rjge8sk/1/

내 현재의 데이터 세트는 다음과 같습니다과 나는과 같이 데이터 세트에 스택 레이블을 추가 할 수있는 똑똑한 솔루션을하고 싶습니다 :

를 내가 ChartJS 나타나서을위한 플러그인을 작성하여 좋은 아니에요

:

datasets: [ 
    { 
     label: "Apples", 
     backgroundColor: "rgba(99,255,132,0.2)", 
     data: [20, 10, 30], 
     stack: 1, 
     stackLabel: "Stack 1" 
    } 

그리고 여기에 내가 스택 레이블 구축을 위해 노력하고있어 원하는 결과입니다 나는 아직 그것을 조금 더 그리는 방법을 알고 싶다. 어떤 도움을 주셔서 감사합니다.

Answer 1

그냥 (별도 그것을 유지하려는 경우 당신이 너무 플러그인으로 이동할 수 있습니다 - https://stackoverflow.com/a/37393862/360067 참조) 너무 그리기 함수를 재정의 groupableBar

... 
draw: function(ease) { 
    Chart.controllers.bar.prototype.draw.apply(this, arguments); 

    var self = this; 
    // check if this is the last dataset in this stack 
    if (!this.chart.data.datasets.some(function (dataset, index) { return (dataset.stack === self.getDataset().stack && index > self.index); })) { 
     var ctx = this.chart.chart.ctx; 
     ctx.save(); 
     ctx.textAlign = 'center'; 
     ctx.textBaseline = 'bottom'; 
     ctx.fillStyle = this.chart.options.defaultFontColor; 
     // loop through all its rectangles and draw the label 
     helpers.each(self.getMeta().data, function (rectangle, index) { 
      ctx.fillText(this.getDataset().stack, rectangle._model.x, rectangle._model.y) 
     }, this); 
     ctx.restore(); 
    } 
}, 
... 

에서 다음 만의 장소에 스택 레이블을 사용하여 http://jsfiddle.net/bm88sd5c/

012 - 그래서

... 
stack: 'Stack 1' 
... 

---

업데이트 바이올린처럼, 인덱스 스택

스택 라벨에 애니메이션 효과를 적용하려면 draw 재정의에서 _model을 _view으로 변경하십시오.

전체 솔루션은 스택 레이블의 길이를 고려하여 축 레이블과 마찬가지로 회전하지만 다소 복잡 할 것입니다.