javascript - 设置 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"
              }
            ];
          };
        };
      };

就像我说的，一切都渲染得很好，我只是想要 donut 中文本的样式。谢谢!

我的(不工作)JSFiddle 在这里:https://jsfiddle.net/2nfzktzx/1/

Answer 1

这是您的问题的一种可能的解决方案。图表来自n3-charts已经满足你的要求了。检查examples页面上的部分可查找更多信息。