Chart.js AngularJS 2.0을 사용하여 도넛 형 차트에 텍스트를 추가하는 방법은 무엇입니까?

Question

 <p-chart id="first" *ngIf="!loading && total > 0" 
       height="200" type="doughnut" [data]="dataForActiveInactive" [options]="chartOptions"></p-chart> 

도넛 내부에 텍스트를 추가하는 방법은 무엇입니까? 여기에 몇 가지 코드 샘플이 있지만 AngularJS 2.0에서는 작동하지 않습니다. 나는 후드 ChartJS을 사용하는 AngularJS와 2.0 PrimeNG을 사용하고

: http://www.primefaces.org/primeng/#/chart/doughnut

나는 애니메이션 객체 인라인 설정을 시도했지만 작동하지 않았다 :

animation="{onAnimationComplete: function() {alert('animation complete');}" 

Answer 1

그것을 해결, 아마도 이상적으로는 아니지만 그것을 해결했습니다.

툴팁을 올릴 수있는 플러그인을 등록한 다음 옵션에서 플러그인을 호출하십시오. , 차트의 옵션에서 다음

Chart.pluginService.register({ 
    beforeRender: function (chart) { 
    if (chart.config.options.showAllTooltips) { 

     chart.pluginTooltips = []; 
     chart.config.data.datasets.forEach(function (dataset, i) { 
      chart.getDatasetMeta(i).data.forEach(function (sector, j) { 
       chart.pluginTooltips.push(new Chart.Tooltip({ 
        _chart: chart.chart, 
        _chartInstance: chart, 
        _data: chart.data, 
        _options: chart.options.tooltips, 
        _active: [sector] 
       }, chart)); 
      }); 
     }); 

     chart.options.tooltips.enabled = false; 
    } 
}, 
    afterDraw: function (chart, easing) { 
    if (chart.config.options.showAllTooltips) { 
     if (!chart.allTooltipsOnce) { 
      if (easing !== 1) 
       return; 
      chart.allTooltipsOnce = true; 
     } 

     chart.options.tooltips.enabled = true; 
     Chart.helpers.each(chart.pluginTooltips, function (tooltip) { 
      tooltip.initialize(); 
      tooltip.update(); 
      tooltip.pivot(); 
      tooltip.transition(easing).draw(); 
     }); 
     chart.options.tooltips.enabled = false; 
    } 
    } 
}); 

다음과 같습니다 :

당신이 그것을에 다음 코드를 사용하여 index.html을에 chart.js 수입 곳에서 스크립트 파일을 포함

options: { 
    showAllTooltips: true 
} 

추가 포인트는 클래스 아래/외부의 app.component.ts에 포함시킬 수 있지만 declare var Chart:any;

으로 차트를 선언해야합니다.