chartjs（react-chartjs-2） 饼状图添加百分比显示

框架react 

import React from 'react';
import {Pie} from 'react-chartjs-2';

const data = {
	labels: [
		'1Red',
		'2pit',
		'3Yel',
		'4Ye',
		'5Ye',
		'6Ye',
		'7Y',
		'8Y',
		'9Yel',
		'10Ye',
		'11Y',
		'12Ye',
		
	],
	datasets: [{
		data: [300, 50, 289,100,89,90,100,44,254,456,88,874],
		backgroundColor: [
			"#ff6384","#36a2eb","#ffce56","#00ffff","#0000ff","#a52a2a","#00008b","#008b8b","#a9a9a9","#006400","#bdb76b","#8b008b","#556b2f","#ff8c00","#9932cc","#8b0000","#e9967a","#9400d3","#ff00ff", "#ffd700","#008000","#4b0082","#f0e68c","#add8e6","#90ee90", "#d3d3d3","#ffb6c1","#00ff00","#ff00ff","#800000","#000080","#808000","#ffa500","#ffc0cb","#800080","#800080","#ff0000","#c0c0c0","#ffff00"
		],
		hoverBackgroundColor: [
			"#ff6384","#36a2eb","#ffce56","#00ffff","#0000ff","#a52a2a","#00008b","#008b8b","#a9a9a9","#006400","#bdb76b","#8b008b","#556b2f","#ff8c00","#9932cc","#8b0000","#e9967a","#9400d3","#ff00ff", "#ffd700","#008000","#4b0082","#f0e68c","#add8e6","#90ee90", "#d3d3d3","#ffb6c1","#00ff00","#ff00ff","#800000","#000080","#808000","#ffa500","#ffc0cb","#800080","#800080","#ff0000","#c0c0c0","#ffff00"
		],
		borderWidth:0
		
	}]
};
const lineOptions ={
	maintainAspectRatio: true,
	tooltips: {
		enabled: true,
		callbacks: {
			label: function (tooltipItem, data) {
				
				var dataset = data.datasets[tooltipItem.datasetIndex];
				var total = dataset.data.reduce(function (previousValue, currentValue, currentIndex, array) {
					return previousValue + currentValue;
				});
				var currentValue = dataset.data[tooltipItem.index];
				var percentage = Math.floor(((currentValue / total) * 100) + 0.5);
				return percentage + "%";
			},                    
			title: function (tooltipItem, data) {
				return data.labels[tooltipItem[0].index];
			},
			
			
		},
		
	},
  legend: {
	display: false,
  },
  layout: {
	padding: {
		left: 0,
		right: 0,
		top:50,
		bottom:20
	}
  },
  animation: {
	duration: 1,
	onComplete: function () {
		var chartInstance = this.chart,radian = 0,tmpRadian,middleRadian,
		ctx = chartInstance.ctx;
		Chart.defaults.global.defaultFontSize = 12 ;
		Chart.defaults.global.defaultFontFamily = 'PingFangTC';
		Chart.defaults.global.defaultFontStyle = '400';
		ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
		ctx.textAlign = 'center';
		ctx.textBaseline = 'bottom';

		this.data.datasets.forEach(function (dataset, i) {
			var meta = chartInstance.controller.getDatasetMeta(i);
			meta.data.forEach(function (bar, index) {
				var data = dataset.data[index],x,y,r,dataPercentage,canvasWidth,canvasHeight,dataName,centerAngle;  
				r = (chartInstance.chartArea.bottom-chartInstance.chartArea.top)/2+20;
				//弧長
				centerAngle = bar._model.circumference;
				// 中間弧度
				radian = radian + centerAngle;
				tmpRadian = radian;
				middleRadian = tmpRadian - centerAngle/2
				// x、y坐標
				canvasWidth = bar._chart.chartArea.right
				canvasHeight = bar._chart.chartArea.bottom 
				x = canvasWidth/2 + Math.sin(middleRadian) * r ;
				y = (canvasHeight+60)/2 -  Math.cos(middleRadian) * r ;
				//百分比
				dataPercentage =  Math.floor(((data/meta.total) * 100) + 0.5)
				dataName = bar._model.label
				ctx.fillStyle = '#222'
				ctx.fillText(dataName+':'+dataPercentage+'%',x,y,50);
							
			});
		});             
	}
}
  
	
}

export default React.createClass({
  displayName: 'PieExample',

  render() {
    return (
      <div>
        {/* <h2>Pie Example 111</h2> */}
        <Pie data={data} 
			options={lineOptions}
		/>
      </div>
    );
  }
});