Question

我有两个用Chart JS编写的甜甜圈图，其中的标签将指定美元金额以及百分比。

<canvas id="ikeBudgetR1" width="400px" height="400px;"></canvas>
<canvas id="ikeBudgetR2" width="400px" height="400px;"></canvas>

JavaScript

<script>
  var ctx = document.getElementById("ikeBudgetR1").getContext('2d');
  var ikeBudgetR1 = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Administration", "Project Delivery", "Multifamily", "Homebuyers Assistance Program", "Single Family Home Repair Program"],
      datasets: [{
        backgroundColor: [
          "#00558C",
          "#64A70B",
          "#DA291C",
          "#DE7C00",
          "#9B26B6"
        ],
        data: [4362828, 1787858, 57682924, 10108500, 13314455]
      }]
    },
    options: {

      title: {
        display: true,
        text: 'Round 1'
      },
      legend: {
          display: false,
      },
      tooltips: {
        callbacks: {
          title: function(tooltipItem, data) {
            return data['labels'][tooltipItem[0]['index']];
          },
          label: function(tooltipItem, data) {
            var value = data.datasets[0].data[tooltipItem.index];
            value = value.toString();
            value = value.split(/(?=(?:...)*$)/);
            value = value.join(',');
            return '$' + value;
          },
          afterLabel: function(tooltipItem, data) {
            var dataset = data['datasets'][0];
            var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
            return percent + '%';
          }
        },
      }        
    }
  });
</script>
<script>
  var ctx = document.getElementById("ikeBudgetR2").getContext('2d');
  var ikeBudgetR2 = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Multifamily", "Single Family Home Repair Program", "Infrastructure Projects"],
      datasets: [{
        backgroundColor: [
          "#00558C",
          "#64A70B",
          "#DA291C",
          "#DE7C00",
          "#9B26B6"
        ],
        data: [91400000, 63700000, 26100000]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Round 2'
      },
      legend: {
          display: false,
      },
      tooltips: {
        callbacks: {
          title: function(tooltipItem, data) {
            return data['labels'][tooltipItem[0]['index']];
          },
          label: function(tooltipItem, data) {
            var value = data.datasets[0].data[tooltipItem.index];
            value = value.toString();
            value = value.split(/(?=(?:...)*$)/);
            value = value.join(',');
            return '$' + value;
          },
          afterLabel: function(tooltipItem, data) {
            var dataset = data['datasets'][0];
            var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
            return '(' + percent + '%)';
          }
        },
      }        
    }
  });
</script>

我只能获得要为其中一张图表计算的百分比。是否可以为这些图表制作一个全局标签，而不必为每个图表计算百分比？

My fiddle

Answer 1

我能够使用以下公式解决此问题：

          afterLabel : function(tooltipItem, data) {
              var allData = data.datasets[tooltipItem.datasetIndex].data;
              var tooltipData = allData[tooltipItem.index];
              var total = 0;
              for (var i=0; i<allData.length; i++) {
                  total += allData[i];
              }
              var tooltipPercentage = Math.round((tooltipData / total) * 100);
              return tooltipPercentage + '%';
          },

这不是一个全局公式，但适用于我添加到页面上的每个图表。

多个Chart JS百分比标签

1 个答案: