用于条件数据的Chartjs甜甜圈图

Question

由于我是Charting库的新手，在我的情况下，我被要求根据我的要求实现Chartjs库。所以我选择了一个chartjs库。 我必须想知道用例是否有人可以帮助我，这对我来说将是一个节省大量时间的方法。其实我从早上开始就在谷歌搜索。

实际用例是我有一个甜甜圈图，其中我试图显示单个值的数据。当我浏览了文档时，chartjs在一系列数据值上工作。但是我的API只有一个值，在我的情况下意味着它是一个计数器变量。假设我的最大计数器限制是5000，那么我必须显示5000作为最大计数器，而当前计数器是100，那么我必须以甜甜圈弧线将其显示为红色。表示图形已消耗了类似数据的数量。

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

使用Chartjs可以吗？见下图。

Answer 1

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

我已经使用chartjs-datalabels插件在pieChart上显示数据标签。

希望有帮助！

提琴-> http://jsfiddle.net/y6mnkz84/7/

  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);