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-charts的图表已经满足您的要求。查看页面上的examples部分以查找更多信息。

设置Chart.js圆环图的中间文本

1 个答案: