如何在 Chart.js 的饼图中（顶部）添加切片的大小？答案

【问题标题】：How add the sizes of the slices in the pie chart (at the top) in Chart.js?如何在 Chart.js 的饼图中（顶部）添加切片的大小？
【发布时间】：2021-12-10 18:09:56
【问题描述】：

我开始学习 chart.js 库了。

我画了一个饼图（比如“饼图”）。当您将鼠标悬停在图表的切片上时，会在弹出窗口中显示一个数字，用于设置扇区的大小。

   new chart(
      document.getElementById('diagram_1').getContext('2d'), {
         type: 'pie',
         data: {
            labels: [
               'Завершенная задача',
               'Новая задача',
               'Ошибка выполнения'
            ],
            datasets: [{
               label: '# of Votes',
               data: [@successful_tasks, @new_tasks, @error_tasks],
               backgroundColor: [
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(255, 99, 132, 0.2)'
               ],
               borderColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(255, 99, 132, 1)'
               ],
               borderWidth: 1
            }]
         },
         options: {
            scales: {
               y: {
                  beginAtZero: true
               }
            },
            responsive: false
         }
      }
   )

如何让这个数字仍然显示在顶部，列出扇区的位置（我在图中用红色圆圈标记了这个地方）？

我可以将所需的数字添加到标签数组中

...
data: {
   labels: [
      'Завершенная задача: ' + @successful_tasks,
      'Новая задача: ' + @new_tasks,
      'Ошибка выполнения: ' + @error_tasks
   ],
...

但是这个数字会在工具提示中出现两次

【问题讨论】：

标签： javascript vue.js chart.js coffeescript

【解决方案1】：

您可以为此使用插件系统：

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      customNumber: {
        textColor: 'red',
        xOffset: 10,
        yOffset: 0,
        font: '24px  Comic Sans MS'
      }
    }
  },
  plugins: [{
    id: 'customNumber',
    afterDraw: (chart, args, opts) => {
      const hoveredSlice = chart._active[0];
      const {
        ctx,
        chartArea: {
          right
        }
      } = chart;

      if (!hoveredSlice) {
        return;
      }

      ctx.font = opts.font || '24px verdana, sans-serif'
      ctx.fillStyle = opts.textColor || 'black'

      const val = chart.data.datasets[hoveredSlice.datasetIndex].data[hoveredSlice.index];
      const meassures = ctx.measureText(val);
      const height = ctx.measureText('M').width;

      ctx.fillText(val, (right - meassures.width - (opts.xOffset || 0)), height + (opts.yOffset || 0))
    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

【讨论】：

【解决方案2】：

我找到了答案。我的项目是用 CoffeeScript 编写的，但我认为 StackOverflow 社区将代码发布在 JS 中会更有用。

options: {
  legend: {
    labels: {
      generateLabels: function(chart) {
        var data = chart.data;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map(function(label, i) {
            var meta = chart.getDatasetMeta(0);
            var ds = data.datasets[0];
            var arc = meta.data[i];
            var custom = arc && arc.custom || {};
            var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
            var arcOpts = chart.options.elements.arc;
            var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
            var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
            var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
            var value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];

            return {
                text: label + ": " + value,
                fillStyle: fill,
                strokeStyle: stroke,
                lineWidth: bw,
                hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
                index: i
            };
          });
        } else {
          return [];
        }
      }
    }
  }
}

【讨论】：