Chart.js 条件数据的Chartjs圆环图

因为我对图表库非常陌生，在我的例子中，我被要求根据我的需求实现一个Chartjs库。所以我选择了一个chartjs库。 我必须知道用例是否有人能帮我，那么它对我来说是一个很好的时间节省。事实上，我从早上就开始用谷歌搜索这个

实际的用例是我有一个甜甜圈图，在这个图中我试图显示单个值的数据。在我阅读文档时，chartjs处理一组数据值。但我的API只有一个值，这意味着在我的例子中它是一个计数器变量。假设我的最大计数器限制是5000，那么我必须显示5000作为最大计数器，而当前计数器是100，那么我必须以红色在圆环弧中显示它。表示图形消耗了多少数据，比如

假设总共运行5000次 如果运行次数变成任何计数，比如100，那么我们需要从总运行次数中减去-在甜甜圈内，当前运行次数=4900。随着跑步次数的增加，我们需要在甜甜圈圈图中显示减少的跑步次数。 一旦当前运行计数达到总运行数，则以红色显示圆圈，并将计数设为0

使用Chartjs可以实现这一点吗？见下图

---

在Chart.js中没有内置的支持，但是，它可以通过一个非常简单的hack来实现。查看代码并尝试理解，如果有任何问题，请随时发表评论

我使用了chartjs datalabels插件在图表上显示datalabels

希望有帮助

小提琴->

---

这实际上是很好的，但是当最小值达到5000或以上时，图表显示的是负值，因此我如何限制图表，如果值超过其限制，那么我如何使计数重置我的意思是全部为零。。任何想法我现在已经更新了答案，它不会显示零或负值，要在某个阈值上重置图表有很多方法，做一些研究，伟大的库纳尔，还有一件事如果我想在甜甜圈内显示值，那么我该怎么做？请试着阅读chartjs.datalabels插件的文档，这是更新的提琴，用于在甜甜圈内部显示->

  function drawPieChart(value, maxValue) {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Consumed"],
      datasets: [{
        data: [value, maxValue - value],
        backgroundColor: ['green', 'red'],
      }]
    },
    options: {
      tooltips: {
        enabled: false,
      },
      plugins: {
        datalabels: {
          backgroundColor: function(context) {
            return context.dataset.backgroundColor;
          },
          display: function(context) {
            var dataset = context.dataset;            
            var value = dataset.data[context.dataIndex];
            return value > 0;
          },
          color: 'white'
        }
      }
    }
  });
}


drawPieChart(5000, 5000);