blocks|key|173674|text|您必须像这样修改代码:在chart.Doughnut.defaults中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|173675|labelFontFamily+:+"Arial",
labelFontStyle+:+"normal",
labelFontSize+:+24,
labelFontColor+:+"#666"|code-block|syntax|javascript|173676|然后在函数drawPieSegments中|173677|ctx.fillText(data[0].value+%2B+"%25",+width/2+-+20,+width/2,+200);|173678|看看这个拉动：https://github.com/nnnick/Chart.js/pull/35|173679|下面是一个实现相同功能的fiddle+http://jsfiddle.net/mayankcpdixit/6xV78/。|173680|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/nnnick/Chart.js/pull/35|1|http://jsfiddle.net/mayankcpdixit/6xV78/^0|C|N|0|0|5|F|0|0|1Q|0|7|16|0|0|J|14|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|Q|3|R|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|S|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

<p>You have to modify the code like:
in <code>chart.Doughnut.defaults</code> </p>

<pre><code>labelFontFamily : "Arial",
labelFontStyle : "normal",
labelFontSize : 24,
labelFontColor : "#666"
</code></pre>

<p>and then in function <code>drawPieSegments</code></p>

<p><code>ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);</code> </p>

<p>See this pull: <a href="https://github.com/nnnick/Chart.js/pull/35" rel="noreferrer">https://github.com/nnnick/Chart.js/pull/35</a> </p>

<p>here is a fiddle <a href="http://jsfiddle.net/mayankcpdixit/6xV78/" rel="noreferrer">http://jsfiddle.net/mayankcpdixit/6xV78/</a> implementing the same.</p>


blocks|key|173742|text|我会避免修改chart.js代码来实现这一点，因为使用常规的CSS和HTML很容易。这是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173743|HTML：|173744|<canvas+id="productChart1"+width="170"></canvas>
<div+class="donut-inner">
++++<h5>47+/+60+st</h5>
++++<span>(30+/+25+st)</span>
</div>|code-block|syntax|javascript|173745|CSS：|173746|.donut-inner+{
+++margin-top:+-100px;
+++margin-bottom:+100px;
}
.donut-inner+h5+{
+++margin-bottom:+5px;
+++margin-top:+0;
}
.donut-inner+span+{
+++font-size:+12px;
}|173747|输出如下所示：|173748|​|173749|📷|atomic|offset|length|173750|173751|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/84e2f0d35721dd1ee417a1c814f24b4b.png|imageAlt^0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1C|8|@]|9|@$T|1D|U|1E|1|1F]]|A|$]]|$1|V|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]]]

<p>I'd avoid modifying the chart.js code to accomplish this, since it's pretty easy with regular CSS and HTML. Here's my solution:</p>

<p>HTML:</p>

<pre><code>&lt;canvas id="productChart1" width="170"&gt;&lt;/canvas&gt;
&lt;div class="donut-inner"&gt;
    &lt;h5&gt;47 / 60 st&lt;/h5&gt;
    &lt;span&gt;(30 / 25 st)&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.donut-inner {
   margin-top: -100px;
   margin-bottom: 100px;
}
.donut-inner h5 {
   margin-bottom: 5px;
   margin-top: 0;
}
.donut-inner span {
   font-size: 12px;
}
</code></pre>

<p>The output looks like this:</p>

<p><img src="https://i.stack.imgur.com/Xreri.png" alt="enter image description here"></p>


blocks|key|4679682|text|这对我来说也是有效的……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679683|<div+style="width:+100px;+height:+100px;+float:+left;+position:+relative;">
++++<div
++++++++style="width:+100%25;+height:+40px;+position:+absolute;+top:+50%25;+left:+0;+margin-top:+-20px;+line-height:19px;+text-align:+center;+z-index:+999999999999999">
++++++++99%25<Br+/>
++++++++Total
++++</div>
++++<canvas+id="chart-area"+width="100"+height="100"+/>
</div>|code-block|syntax|javascript|4679684|​|4679685|📷|atomic|offset|length|4679686|4679687|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/813901868717d86a21ebfe4b532cfd18.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<p>This is also working at my end...</p>

<pre><code>&lt;div style="width: 100px; height: 100px; float: left; position: relative;"&gt;
    &lt;div
        style="width: 100%; height: 40px; position: absolute; top: 50%; left: 0; margin-top: -20px; line-height:19px; text-align: center; z-index: 999999999999999"&gt;
        99%&lt;Br /&gt;
        Total
    &lt;/div&gt;
    &lt;canvas id="chart-area" width="100" height="100" /&gt;
&lt;/div&gt;
</code></pre>

<p><img src="https://i.stack.imgur.com/knOMX.png" alt="enter image description here"></p>


blocks|key|4679968|text|如果你想要响应，你可以使用css的相对/绝对定位。另外，它可以很容易地处理多行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679969|https://jsfiddle.net/mgyp0jkk/|offset|length|4679970|<div+class="relative">
++<canvas+id="myChart"></canvas>++++++
++<div+class="absolute-center+text-center">
++++<p>Some+text</p>
++++<p>Some+text</p>
++</div>
</div>|code-block|syntax|javascript|4679971|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>You can use css with relative/absolute positioning if you want it responsive. Plus it can handle easily the multi-line.</p>

<p><a href="https://jsfiddle.net/mgyp0jkk/" rel="noreferrer">https://jsfiddle.net/mgyp0jkk/</a></p>

<pre><code>&lt;div class="relative"&gt;
  &lt;canvas id="myChart"&gt;&lt;/canvas&gt;      
  &lt;div class="absolute-center text-center"&gt;
    &lt;p&gt;Some text&lt;/p&gt;
    &lt;p&gt;Some text&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4679731|text|基于@rap-2-h回答，这里的代码在Chart.js上使用甜甜圈图表上的文本，以便在仪表板中使用，如。它有动态字体大小的响应选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679732|HTML：|4679733|<div>text
<canvas+id="chart-area"+width="300"+height="300"+style="border:1px+solid"/><div>|code-block|syntax|javascript|4679734|脚本：|4679735|var+doughnutData+=+[
++++++++++++{
++++++++++++++++value:+100,
++++++++++++++++color:"#F7464A",
++++++++++++++++highlight:+"#FF5A5E",
++++++++++++++++label:+"Red"
++++++++++++},
++++++++++++{
++++++++++++++++value:+50,
++++++++++++++++color:+"#CCCCCC",
++++++++++++++++highlight:+"#5AD3D1",
++++++++++++++++label:+"Green"
++++++++++++}
++++++++];

$(document).ready(function(){
++var+ctx+=+$('#chart-area').get(0).getContext("2d");

++var+myDoughnut+=+new+Chart(ctx).Doughnut(doughnutData,{
+++++animation:true,
+++++responsive:+true,
+++++showTooltips:+false,
+++++percentageInnerCutout+:+70,
+++++segmentShowStroke+:+false,
+++++onAnimationComplete:+function()+{

+++++var+canvasWidthvar+=+$('#chart-area').width();
+++++var+canvasHeight+=+$('#chart-area').height();
+++++//this+constant+base+on+canvasHeight+/+2.8em
+++++var+constant+=+114;
+++++var+fontsize+=+(canvasHeight/constant).toFixed(2);
+++++ctx.font=fontsize+%2B"em+Verdana";
+++++ctx.textBaseline="middle";+
+++++var+total+=+0;
+++++$.each(doughnutData,function()+{
+++++++total+%2B=+parseInt(this.value,10);
+++});
++var+tpercentage+=+((doughnutData[0].value/total)*100).toFixed(2)%2B"%25";
++var+textWidth+=+ctx.measureText(tpercentage).width;

+++var+txtPosx+=+Math.round((canvasWidthvar+-+textWidth)/2);
++++ctx.fillText(tpercentage,+txtPosx,+canvasHeight/2);
++}
+});
});|4679736|这里是调整窗口大小的示例code.try。http://jsbin.com/wapono/13/edit|offset|length|4679737|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/wapono/13/edit^0|0|0|0|0|0|L|V|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Base on @rap-2-h answer,Here the code for using text on doughnut chart on Chart.js for using in dashboard like. It has dynamic font-size for responsive option.</p>

<p>HTML:</p>

<pre><code>&lt;div&gt;text
&lt;canvas id="chart-area" width="300" height="300" style="border:1px solid"/&gt;&lt;div&gt;
</code></pre>

<p>Script:</p>

<pre><code>var doughnutData = [
            {
                value: 100,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#CCCCCC",
                highlight: "#5AD3D1",
                label: "Green"
            }
        ];

$(document).ready(function(){
  var ctx = $('#chart-area').get(0).getContext("2d");

  var myDoughnut = new Chart(ctx).Doughnut(doughnutData,{
     animation:true,
     responsive: true,
     showTooltips: false,
     percentageInnerCutout : 70,
     segmentShowStroke : false,
     onAnimationComplete: function() {

     var canvasWidthvar = $('#chart-area').width();
     var canvasHeight = $('#chart-area').height();
     //this constant base on canvasHeight / 2.8em
     var constant = 114;
     var fontsize = (canvasHeight/constant).toFixed(2);
     ctx.font=fontsize +"em Verdana";
     ctx.textBaseline="middle"; 
     var total = 0;
     $.each(doughnutData,function() {
       total += parseInt(this.value,10);
   });
  var tpercentage = ((doughnutData[0].value/total)*100).toFixed(2)+"%";
  var textWidth = ctx.measureText(tpercentage).width;

   var txtPosx = Math.round((canvasWidthvar - textWidth)/2);
    ctx.fillText(tpercentage, txtPosx, canvasHeight/2);
  }
 });
});
</code></pre>

<p>Here the sample code.try to resize the window. <a href="http://jsbin.com/wapono/13/edit">http://jsbin.com/wapono/13/edit</a></p>


blocks|key|4679909|text|这是基于Cmyker对Chart.js+2的更新(作为另一个答案发布，因为我还不能评论)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679910|我在Chrome上显示图例时遇到了一个文本对齐问题，因为图表高度不包括这个，所以它不能正确地在中间对齐。通过在计算fontSize和textY时考虑此问题，修复了此问题。|4679911|我在方法中计算百分比，而不是一个设置值，因为我在页面上有多个这样的值。假设您的图表只有两个值(否则百分比是多少？第一个是你想要显示的百分比。我还有一堆其他的图表，所以我检查了type+=+doughnut。我只是使用甜甜圈来显示百分比，所以它对我有效。|4679912|文本颜色看起来有点随意，这取决于运行的顺序等，所以我在调整大小时遇到了一个问题，文本会改变颜色(在一种情况下是在黑色和主色之间，在另一种情况下是二次色和白色)，所以我“保存”现有的填充样式，绘制文本(以主数据的颜色)，然后恢复旧的填充样式。(保留旧的填充样式似乎没有必要，但你永远不会知道。)|4679913|https://jsfiddle.net/g733tj8h/|offset|length|4679914|Chart.pluginService.register({
++beforeDraw:+function(chart)+{
++++var+width+=+chart.chart.width,
++++++++height+=+chart.chart.height,
++++++++ctx+=+chart.chart.ctx,
++++++++type+=+chart.config.type;

++++if+(type+==+'doughnut')
++++{
++++++var+percent+=+Math.round((chart.config.data.datasets[0].data[0]+*+100)+/
++++++++++++++++++++(chart.config.data.datasets[0].data[0]+%2B
++++++++++++++++++++chart.config.data.datasets[0].data[1]));
++++++var+oldFill+=+ctx.fillStyle;
++++++var+fontSize+=+((height+-+chart.chartArea.top)+/+100).toFixed(2);

++++++ctx.restore();
++++++ctx.font+=+fontSize+%2B+"em+sans-serif";
++++++ctx.textBaseline+=+"middle"

++++++var+text+=+percent+%2B+"%25",
++++++++++textX+=+Math.round((width+-+ctx.measureText(text).width)+/+2),
++++++++++textY+=+(height+%2B+chart.chartArea.top)+/+2;

++++++ctx.fillStyle+=+chart.config.data.datasets[0].backgroundColor[0];
++++++ctx.fillText(text,+textX,+textY);
++++++ctx.fillStyle+=+oldFill;
++++++ctx.save();
++++}
++}
});|code-block|syntax|javascript|4679915|​|4679916|var+data+=+{
++labels:+["Red","Blue"],
++datasets:+[
++++{
++++++data:+[300,+50],
++++++backgroundColor:+["#FF6384","#36A2EB"],
++++}]
};

Chart.pluginService.register({
++beforeDraw:+function(chart)+{
++++var+width+=+chart.chart.width,
++++++++height+=+chart.chart.height,
++++++++ctx+=+chart.chart.ctx,
++++++++type+=+chart.config.type;

++++if+(type+==+'doughnut')
++++{
++++	var+percent+=+Math.round((chart.config.data.datasets[0].data[0]+*+100)+/
++++++++++++++++++++(chart.config.data.datasets[0].data[0]+%2B
++++++++++++++++++++chart.config.data.datasets[0].data[1]));
			var+oldFill+=+ctx.fillStyle;
++++++var+fontSize+=+((height+-+chart.chartArea.top)+/+100).toFixed(2);
++++++
++++++ctx.restore();
++++++ctx.font+=+fontSize+%2B+"em+sans-serif";
++++++ctx.textBaseline+=+"middle"

++++++var+text+=+percent+%2B+"%25",
++++++++++textX+=+Math.round((width+-+ctx.measureText(text).width)+/+2),
++++++++++textY+=+(height+%2B+chart.chartArea.top)+/+2;
			
++++++ctx.fillStyle+=+chart.config.data.datasets[0].backgroundColor[0];
++++++ctx.fillText(text,+textX,+textY);
++++++ctx.fillStyle+=+oldFill;
++++++ctx.save();
++++}
++}
});

var+myChart+=+new+Chart(document.getElementById('myChart'),+{
++type:+'doughnut',
++data:+data,
++options:+{
++	responsive:+true,
++++legend:+{
++++++display:+true
++++}
++}
});|4679917|<script+src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas+id="myChart"></canvas>|4679918|4679919|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|U|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@$J|19|K|1A|1|1B]]|A|$]]|$1|L|3|M|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1E|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|N|7|1F|8|@]|9|@]|A|$O|P]]|$1|W|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|I]]]]

<p>This is based on Cmyker's update for Chart.js 2. (posted as another answer as I can't comment yet)</p>

<p>I had an issue with the text alignment on Chrome when the legend is displayed as the chart height does not include this so it's not aligned correctly in the middle. Fixed this by accounting for this in the calculation of fontSize and textY.</p>

<p>I calculated percentage inside the method rather than a set value as I have multiple of these on the page. Assumptions are that your chart only has 2 values (otherwise what is the percentage of? and that the first is the one you want to show the percentage for. I have a bunch of other charts too so I do a check for type = doughnut. I'm only using doughnuts to show percentages so it works for me.</p>

<p>Text color seems a bit hit and miss depending on what order things run in etc so I ran into an issue when resizing that the text would change color (between black and the primary color in one case, and secondary color and white in another) so I "save" whatever the existing fill style was, draw the text (in the color of the primary data) then restore the old fill style. (Preserving the old fill style doesn't seem needed but you never know.)</p>

<p><a href="https://jsfiddle.net/g733tj8h/" rel="noreferrer">https://jsfiddle.net/g733tj8h/</a></p>

<pre><code>Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx,
        type = chart.config.type;

    if (type == 'doughnut')
    {
      var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) /
                    (chart.config.data.datasets[0].data[0] +
                    chart.config.data.datasets[0].data[1]));
      var oldFill = ctx.fillStyle;
      var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2);

      ctx.restore();
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle"

      var text = percent + "%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = (height + chart.chartArea.top) / 2;

      ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0];
      ctx.fillText(text, textX, textY);
      ctx.fillStyle = oldFill;
      ctx.save();
    }
  }
});
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var data = {
  labels: ["Red","Blue"],
  datasets: [
    {
      data: [300, 50],
      backgroundColor: ["#FF6384","#36A2EB"],
    }]
};

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx,
        type = chart.config.type;

    if (type == 'doughnut')
    {
    	var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) /
                    (chart.config.data.datasets[0].data[0] +
                    chart.config.data.datasets[0].data[1]));
			var oldFill = ctx.fillStyle;
      var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2);
      
      ctx.restore();
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle"

      var text = percent + "%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = (height + chart.chartArea.top) / 2;
			
      ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0];
      ctx.fillText(text, textX, textY);
      ctx.fillStyle = oldFill;
      ctx.save();
    }
  }
});

var myChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
  	responsive: true,
    legend: {
      display: true
    }
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"&gt;&lt;/script&gt;
&lt;canvas id="myChart"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


blocks|key|173694|text|您还可以将mayankcpdixit的代码粘贴到onAnimationComplete选项中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|173695|//+...
var+myDoughnutChart+=+new+Chart(ctx).Doughnut(data,+{
++++onAnimationComplete:+function()+{
++++++++ctx.fillText(data[0].value+%2B+"%25",+100+-+20,+100,+200);
++++}
});|code-block|syntax|javascript|173696|动画后将显示文本|173697|entityMap^0|O|J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>You can also paste mayankcpdixit's code in <code>onAnimationComplete</code> option :</p>

<pre><code>// ...
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    onAnimationComplete: function() {
        ctx.fillText(data[0].value + "%", 100 - 20, 100, 200);
    }
});
</code></pre>

<p>Text will be shown after animation</p>


blocks|key|173900|text|我用7个jQueryUI滑块和ChartJs创建了一个演示(里面有动态文本)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173901|Chart.types.Doughnut.extend({
++++++++name:+"DoughnutTextInside",
++++++++showTooltip:+function()+{
++++++++++++this.chart.ctx.save();
++++++++++++Chart.types.Doughnut.prototype.showTooltip.apply(this,+arguments);
++++++++++++this.chart.ctx.restore();
++++++++},
++++++++draw:+function()+{
++++++++++++Chart.types.Doughnut.prototype.draw.apply(this,+arguments);

++++++++++++var+width+=+this.chart.width,
++++++++++++++++height+=+this.chart.height;

++++++++++++var+fontSize+=+(height+/+140).toFixed(2);
++++++++++++this.chart.ctx.font+=+fontSize+%2B+"em+Verdana";
++++++++++++this.chart.ctx.textBaseline+=+"middle";

++++++++++++var+red+=+$(+"#red"+).slider(+"value"+),
++++++++++++green+=+$(+"#green"+).slider(+"value"+),
++++++++++++blue+=+$(+"#blue"+).slider(+"value"+),
++++++++++++yellow+=+$(+"#yellow"+).slider(+"value"+),
++++++++++++sienna+=+$(+"#sienna"+).slider(+"value"+),
++++++++++++gold+=+$(+"#gold"+).slider(+"value"+),
++++++++++++violet+=+$(+"#violet"+).slider(+"value"+);
++++++++++++var+text+=+(red%2Bgreen%2Bblue%2Byellow%2Bsienna%2Bgold%2Bviolet)+%2B+"+minutes";
++++++++++++var+textX+=+Math.round((width+-+this.chart.ctx.measureText(text).width)+/+2);
++++++++++++var+textY+=+height+/+2;
++++++++++++this.chart.ctx.fillStyle+=+'#000000';
++++++++++++this.chart.ctx.fillText(text,+textX,+textY);
++++++++}
++++});


var+ctx+=+$("#myChart").get(0).getContext("2d");
var+myDoughnutChart+=+new+Chart(ctx).DoughnutTextInside(data,+{
++++responsive:+false
});|code-block|syntax|javascript|173902|DEMO+IN+JSFIDDLE|offset|length|173903|​|173904|📷|atomic|173905|173906|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/9wp4f693/2/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e7172486e15506fa7a0bc9b13a12f363.png|imageAlt^0|0|0|0|G|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1B|8|@]|9|@$I|1C|J|1D|1|1E]]|A|$]]|$1|P|3|L|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|Z|U|10|A|$11|12|13|-4]]]]

<p>I create a demo with 7 jQueryUI Slider and ChartJs (with dynamic text inside)</p>

<pre><code>Chart.types.Doughnut.extend({
        name: "DoughnutTextInside",
        showTooltip: function() {
            this.chart.ctx.save();
            Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
            this.chart.ctx.restore();
        },
        draw: function() {
            Chart.types.Doughnut.prototype.draw.apply(this, arguments);

            var width = this.chart.width,
                height = this.chart.height;

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

            var red = $( "#red" ).slider( "value" ),
            green = $( "#green" ).slider( "value" ),
            blue = $( "#blue" ).slider( "value" ),
            yellow = $( "#yellow" ).slider( "value" ),
            sienna = $( "#sienna" ).slider( "value" ),
            gold = $( "#gold" ).slider( "value" ),
            violet = $( "#violet" ).slider( "value" );
            var text = (red+green+blue+yellow+sienna+gold+violet) + " minutes";
            var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2);
            var textY = height / 2;
            this.chart.ctx.fillStyle = '#000000';
            this.chart.ctx.fillText(text, textX, textY);
        }
    });


var ctx = $("#myChart").get(0).getContext("2d");
var myDoughnutChart = new Chart(ctx).DoughnutTextInside(data, {
    responsive: false
});
</code></pre>

<p><a href="https://jsfiddle.net/9wp4f693/2/" rel="nofollow noreferrer">DEMO IN JSFIDDLE</a></p>

<p><a href="https://i.stack.imgur.com/A1nEH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A1nEH.png" alt="enter image description here"></a></p>


blocks|key|173858|text|@rap-2-h和@Ztuons+Ch的答案不允许激活showTooltips选项，但您可以做的是在呈现图表的对象后面创建并分层第二个canvas对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|173859|重要的部分是div和画布对象本身所需的样式，以便它们在彼此之上呈现。|173860|​|173861|var+data+=+[
++++{value+:+100,+color+:+'rgba(226,151,093,1)',+highlight+:+'rgba(226,151,093,0.75)',+label+:+"Sector+1"},
++++{value+:+100,+color+:+'rgba(214,113,088,1)',+highlight+:+'rgba(214,113,088,0.75)',+label+:+"Sector+2"},
++++{value+:+100,+color+:+'rgba(202,097,096,1)',+highlight+:+'rgba(202,097,096,0.75)',+label+:+"Sector+3"}
]

var+options+=+{+showTooltips+:+true+};
+++++
var+total+=+0;
for+(i+=+0;+i+<+data.length;+i%2B%2B)+{
+++++total+=+total+%2B+data[i].value;
}

var+chartCtx+=+$("#canvas").get(0).getContext("2d");
var+chart+=+new+Chart(chartCtx).Doughnut(data,+options);

var+textCtx+=+$("#text").get(0).getContext("2d");
textCtx.textAlign+=+"center";
textCtx.textBaseline+=+"middle";
textCtx.font+=+"30px+sans-serif";
textCtx.fillText(total,+150,+150);|code-block|syntax|javascript|173862|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script+src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<html>
<body>
<div+style="position:+relative;+width:300px;+height:300px;">
++++<canvas+id="text"+
++++++++++++style="z-index:+1;+
+++++++++++++++++++position:+absolute;
+++++++++++++++++++left:+0px;+
+++++++++++++++++++top:+0px;"+
++++++++++++height="300"+
++++++++++++width="300"></canvas>
++++<canvas+id="canvas"+
++++++++++++style="z-index:+2;+
+++++++++++++++++++position:+absolute;
+++++++++++++++++++left:+0px;+
+++++++++++++++++++top:+0px;"+
++++++++++++height="300"+
++++++++++++width="300"></canvas>
</div>
</body>
</html>|173863|173864|这是jsfiddle：https://jsfiddle.net/68vxqyak/1/|173865|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/68vxqyak/1/^0|R|C|1V|6|0|0|0|0|0|0|B|W|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|T|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>@rap-2-h and @Ztuons Ch's answer doesn't allow for the <code>showTooltips</code> option to be active, but what you can do is create and layer a second <code>canvas</code> object behind the one rendering the chart.</p>

<p>The important part is the styling required in the divs and for the canvas object itself so that they render on top of each other.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [
    {value : 100, color : 'rgba(226,151,093,1)', highlight : 'rgba(226,151,093,0.75)', label : "Sector 1"},
    {value : 100, color : 'rgba(214,113,088,1)', highlight : 'rgba(214,113,088,0.75)', label : "Sector 2"},
    {value : 100, color : 'rgba(202,097,096,1)', highlight : 'rgba(202,097,096,0.75)', label : "Sector 3"}
]

var options = { showTooltips : true };
     
var total = 0;
for (i = 0; i &lt; data.length; i++) {
     total = total + data[i].value;
}

var chartCtx = $("#canvas").get(0).getContext("2d");
var chart = new Chart(chartCtx).Doughnut(data, options);

var textCtx = $("#text").get(0).getContext("2d");
textCtx.textAlign = "center";
textCtx.textBaseline = "middle";
textCtx.font = "30px sans-serif";
textCtx.fillText(total, 150, 150);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"&gt;&lt;/script&gt;
&lt;html&gt;
&lt;body&gt;
&lt;div style="position: relative; width:300px; height:300px;"&gt;
    &lt;canvas id="text" 
            style="z-index: 1; 
                   position: absolute;
                   left: 0px; 
                   top: 0px;" 
            height="300" 
            width="300"&gt;&lt;/canvas&gt;
    &lt;canvas id="canvas" 
            style="z-index: 2; 
                   position: absolute;
                   left: 0px; 
                   top: 0px;" 
            height="300" 
            width="300"&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Here's the jsfiddle: <a href="https://jsfiddle.net/68vxqyak/1/" rel="nofollow">https://jsfiddle.net/68vxqyak/1/</a></p>


blocks|key|174062|text|@Cmyker，chart.js+v2的绝佳解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|174063|一个小小的增强:检查合适的canvas+id是有意义的，请看下面修改过的代码片段。否则，文本(即75%25)也会呈现在页面中其他图表类型的中间。|174064|++Chart.pluginService.register({
++++beforeDraw:+function(chart)+{
++++++if+(chart.canvas.id+===+'doghnutChart')+{
++++++++let+width+=+chart.chart.width,
++++++++++++height+=+chart.chart.outerRadius+*+2,
++++++++++++ctx+=+chart.chart.ctx;

++++++++rewardImg.width+=+40;
++++++++rewardImg.height+=+40;
++++++++let+imageX+=+Math.round((width+-+rewardImg.width)+/+2),
++++++++++++imageY+=+(height+-+rewardImg.height+)+/+2;

++++++++ctx.drawImage(rewardImg,+imageX,+imageY,+40,+40);
++++++++ctx.save();
++++++}
++++}
++});|code-block|syntax|javascript|174065|由于图例(参见：http://www.chartjs.org/docs/latest/configuration/legend.html)会放大图表高度，因此高度的值应通过半径获得。|offset|length|174066|entityMap|0|LINK|mutability|MUTABLE|url|http://www.chartjs.org/docs/latest/configuration/legend.html^0|0|0|0|8|1O|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>@Cmyker, great solution for chart.js v2</p>

<p>One little enhancement: It makes sense to check for the appropriate canvas id, see the modified snippet below. Otherwise the text (i.e. 75%) is also rendered in middle of other chart types within the page.</p>

<pre><code>  Chart.pluginService.register({
    beforeDraw: function(chart) {
      if (chart.canvas.id === 'doghnutChart') {
        let width = chart.chart.width,
            height = chart.chart.outerRadius * 2,
            ctx = chart.chart.ctx;

        rewardImg.width = 40;
        rewardImg.height = 40;
        let imageX = Math.round((width - rewardImg.width) / 2),
            imageY = (height - rewardImg.height ) / 2;

        ctx.drawImage(rewardImg, imageX, imageY, 40, 40);
        ctx.save();
      }
    }
  });
</code></pre>

<p>Since a legend (see: <a href="http://www.chartjs.org/docs/latest/configuration/legend.html" rel="nofollow noreferrer">http://www.chartjs.org/docs/latest/configuration/legend.html</a>) magnifies the chart height, the value for height should be obtained by the radius.</p>


<p>How to render Text inside the doughnut chart, I am using <a href="http://www.chartjs.org/docs/#doughnutChart" rel="noreferrer">ChartJs</a>.</p>


How to add text inside the doughnut chart using Chart.js?

如何在圆环图中呈现文本，我使用的是。

问如何使用Chart.js在甜甜圈图表中添加文本？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Chart.js在甜甜圈图表中添加文本？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Chart.js在甜甜圈图表中添加文本？
EN