Fügen Sie Text in Donut-Diagramm von Diagramm js-2 in reagieren

Question

Ich möchte eine Textnachricht in meinem Donut Kreisdiagramm hinzufügen. Um genauer zu sein, ich möchte etwas wie folgt:

Ich stieß auf das gleiche Problem hier im Stapel Überlauf von ihnen verwenden Diagramm js in jquery und da ich neu bei Javascript bin ich verwirrt. Dies ist, wie ich mein Kreisdiagramm definieren:

<Doughnut 
      data={sectorsData} 
      width={250} 
      height={250} 
      options={{ 
       legend: { 
       display: false 
       }, 
       maintainAspectRatio: false, 
       responsive: true, 
       cutoutPercentage: 60 
      }} 
      /> 

Answer 1

Mein Beispiel verwendet die Eigenschaft text auf den Daten der inneren Text angeben:

const data = { 
    labels: [...], 
    datasets: [...], 
    text: '23%' 
}; 

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import {Doughnut} from 'react-chartjs-2'; 
 

 
// some of this code is a variation on https://jsfiddle.net/cmyker/u6rr5moq/ 
 
var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw; 
 
Chart.helpers.extend(Chart.controllers.doughnut.prototype, { 
 
    draw: function() { 
 
    originalDoughnutDraw.apply(this, arguments); 
 
    
 
    var chart = this.chart.chart; 
 
    var ctx = chart.ctx; 
 
    var width = chart.width; 
 
    var height = chart.height; 
 

 
    var fontSize = (height/114).toFixed(2); 
 
    ctx.font = fontSize + "em Verdana"; 
 
    ctx.textBaseline = "middle"; 
 

 
    var text = chart.config.data.text, 
 
     textX = Math.round((width - ctx.measureText(text).width)/2), 
 
     textY = height/2; 
 

 
    ctx.fillText(text, textX, textY); 
 
    } 
 
}); 
 

 
const data = { 
 
\t labels: [ 
 
\t \t 'Red', 
 
\t \t 'Green', 
 
\t \t 'Yellow' 
 
\t ], 
 
\t datasets: [{ 
 
\t \t data: [300, 50, 100], 
 
\t \t backgroundColor: [ 
 
\t \t '#FF6384', 
 
\t \t '#36A2EB', 
 
\t \t '#FFCE56' 
 
\t \t ], 
 
\t \t hoverBackgroundColor: [ 
 
\t \t '#FF6384', 
 
\t \t '#36A2EB', 
 
\t \t '#FFCE56' 
 
\t \t ] 
 
\t }], 
 
    text: '23%' 
 
}; 
 

 
class DonutWithText extends React.Component { 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <h2>React Doughnut with Text Example</h2> 
 
     <Doughnut data={data} /> 
 
     </div> 
 
    ); 
 
    } 
 
}; 
 

 
ReactDOM.render(
 
    <DonutWithText />, 
 
    document.getElementById('root') 
 
);

<script src="https://gor181.github.io/react-chartjs-2/common.js"></script> 
 
<script src="https://gor181.github.io/react-chartjs-2/bundle.js"></script> 
 

 
<div id="root"> 
 
</div>

Sie über Ich muss etwas nach unten scrollen, um den CodeSnippet zu sehen, wenn ein seltsamer Konsolenfehler auftritt.

Es funktioniert zwar richtig in CodePen, wo ich es schrieb: http://codepen.io/anon/pen/OpdBOq?editors=1010