如何在chart.js中创建像这样的甜甜圈图 [英] How to create a donut chart like this in chart.js

问题描述

我无法在图表中放置15％或16％这样的文本。我有任何办法。

解决方案

由于图表的生成与图表1.X（

I am not able to put text like 15% or 16% in the graph. I s there any way to do it.

解决方案

Since the chart generation has changed a lot from Chart 1.X (docs) to 2.X (docs), it all depend on the version you are currently using for your project :

Version 1.X

Not available for Doughnut charts

If you are working with Pie charts, it is built in in the data you are passing to the chart.

See this jsFiddle for more information and a full result.

---

Version 2.X

Two methods :

• You can create a new chart type using .extend() method.

  Then during the creation of the new type, you draw the percentage in the section.
  Check this jsFiddle to see the result (better than the first version, IMHO).

• You can force the tooltip to always be enabled (as asked in this other question).

  You will just have to edit what is displayed in the tooltip to put the percentage instead of the value. And also move (edit X and Y positions) the tooltip to appear where it should be.

  The image displays a Pie chart, but you can make it work for a Doughnut.

这篇关于如何在chart.js中创建像这样的甜甜圈图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！