如何在chart.js中创建这样的圆环图

时间:2016-07-19 11:56:39

标签: javascript chart.js

enter image description here

我无法在图表中添加15%或16%的文字。我有办法做到这一点。

1 个答案:

答案 0 :(得分:1)

由于图表生成从图1.X(docs)变为2.X(docs),所有这些都取决于您当前用于项目的版本:< / p>

版本1.X

不适用于甜甜圈图表

如果您正在使用饼图,它将内置于您传递给图表的数据中。

有关详细信息和完整结果,请参阅this jsFiddle

<小时/>

版本2.X

两种方法:

  • 您可以create a new chart type使用.extend()方法。

    然后在创建新类型时,您绘制部分中的百分比 检查this jsFiddle以查看结果(比第一个版本更好,恕我直言)。

  • 您可以强制始终启用工具提示(如this other question中所述)。

    您只需编辑工具提示中显示的内容即可设置百分比而不是值。并且还可以移动(编辑XY位置)工具提示,使其显示在应有的位置。

    图像显示饼图,但您可以将其用于甜甜圈。

    enter image description here