设置Chart.js甜甜圈图的中间文本的样式

Question

我已经用尽了所有搜索内容，但似乎找不到答案。 我想在甜甜圈图的中间设置文本样式（而不是工具提示）。

我是从Chart.js创建的，中间有一个数字（一个百分比）。 一切正常，除了我似乎无法设置文字样式。 我尝试过Canvas的ctx来更改字体以及css，但没有运气。 有人可以帮我这个忙吗？ 谢谢。

我的甜甜圈图代码是：

$.getJSON("http://localhost:3000/ed_stats", function (ed_stats) {
      $(".spin-container").each(function (index) {
          if (index == 0) {
            var value = "started";
          } else if (index == 1) {
            var value = "waiting";
          } else if (index == 2) {
            var value = "q1";
            var newstuff = parseInt(JSON.stringify(ed_stats[0][value]));
            var pieData = [{
                value: newstuff,
                color: "#ED4306"
              },
              {
                value: 100 - newstuff,
                color: "#F8AB00"
              }
            ];
            var myPie = new
            Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData, {
              percentageInnerCutout: 60
            });
          } else if (index == 3) {
            var value = "q2";
            var newstuff = parseInt(JSON.stringify(ed_stats[0][value]));
            var pieData = [{
                value: newstuff,
                color: "#ED4306"
              },
              {
                value: 100 - newstuff,
                color: "#F8AB00"
              }
            ];
          };
        };
      };

就像我说的那样，一切都呈现得很好，我就像甜甜圈中的文字样式一样。 谢谢！

我的（不工作）JSFiddle在这里： https ://jsfiddle.net/2nfzktzx/1/

Answer 1

这是您的问题的一种可能的解决方案。 n3- 图中的图表已满足您的要求。 查看页面上的示例部分以找到更多信息。