如何使用Chart.js AngularJS 2.0在圓環圖中添加文本？

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

如何添加甜甜圈內的文字？這裏有一些代碼示例，但它們不適用於AngularJS 2.0。如何使用Chart.js AngularJS 2.0在圓環圖中添加文本？

我使用PrimeNG爲AngularJS 2.0，它使用引擎蓋下ChartJS：http://www.primefaces.org/primeng/#/chart/doughnut

我已經嘗試設置動畫對象的內聯，但沒有奏效：

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

來源

2016-11-14 Dynamic

解決它，也許不理想，但解決了它。

註冊一個插件，使工具提示保持不變，然後從選項中調用插件。

包括下，你在你的index.html在它下面的代碼進口chart.js之腳本文件：

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; 
    } 
    } 
});

然後在您的圖表的選項，包括：

options: { 
    showAllTooltips: true 
}

要獲得額外的積分，您可以將其包含在您的app.component.ts中，該類的下方/外面，但是您需要聲明圖表declare var Chart:any;

來源

2017-02-04 04:56:24

如何使用Chart.js AngularJS 2.0在圓環圖中添加文本？

回答

相關問題