i want to add a text message inside my doughnut pie chart. To be more specific i want something like this:
我在堆栈溢出中遇到了同样的问题，因为他们在 jquery 中使用图表 js，并且由于我是 javascript 的新手，所以我感到很困惑。这就是我定义饼图的方式：
<Doughnut
data={sectorsData}
width={250}
height={250}
options={{
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true,
cutoutPercentage: 60
}}
/>
我的示例使用该属性text在数据上指定内部文本：
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 = {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}],
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>由于一些奇怪的控制台错误，在运行 CodeSnippet 时，您必须向下滚动一点才能看到。
不过它在 CodePen 中工作正常，我在那里写的：http://codepen.io/anon/pen/OpdBOq?editors=1010 http://codepen.io/anon/pen/OpdBOq?editors=1010