时间戳

首页 > 解决方案 > 用于条件数据的 Chartjs 圆环图

chart.js - 用于条件数据的 Chartjs 圆环图

问题描述

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

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

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

这可以使用 Chartjs 吗？见下图。

在此处输入图像描述

标签： chart.js

解决方案

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

我使用 chartjs-datalabels 插件在饼图上显示数据标签。

希望能帮助到你！

小提琴-> 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);

推荐阅读