Chart.js（堆积条形图）如何计算工具提示中标签的总和？

Question

我正在尝试计算并显示 Packed 和 Unpacked 标签的总和

我已经计算了标签的值，但是不知道如何在工具提示中插入新标签

因为在新版本的 Chart.js 上，我可以通过 settings> plugins> tooltip 访问 tooltip，但是在 callbacks 我只得到精确一个标签的数据集

图表 js v3.0.2

var branches_canvas = document.getElementById('branches_canvas').getContext('2d');
var branches = new Chart(branches_canvas, {
    type: 'bar',
    data: {
        labels: ['Org1','Org2','Org3','Org4','Org5'],
        datasets: [
        {
            label: 'Packed',
            data: [12,55,77,32,45],
            backgroundColor: [
                '#94E3EF',
            ],
            hoverOffset: 4
        },
        {
            label: 'Unpacked',
            data: [56,88,22,88,40],
            backgroundColor: [
                '#FFA8A8',
            ],
          }
    ],
      
    },
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        var label = context.dataset.label || '';
                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += context.parsed.y;
                        }
                        console.log('total:', context.parsed._stacks.y[0]+context.parsed._stacks.y[1]);
                        return label;
                    }
                }
            },
        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
            stacked: true
            }
        },
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="branches_canvas"></canvas>

Answer 1

label 回调可用于修改特定标签。所以尝试使用afterBody、footer、afterFooter回调中的任何一个

https://www.chartjs.org/docs/3.0.2/configuration/tooltip.html#tooltip-callbacks

使用footer 回调的示例

var branches_canvas = document.getElementById('branches_canvas').getContext('2d');

var branches = new Chart(branches_canvas, {
  type: 'bar',
  data: {
    labels: ['Org1', 'Org2', 'Org3', 'Org4', 'Org5'],
    datasets: [{
        label: 'Packed',
        data: [12, 55, 77, 32, 45],
        backgroundColor: [
          '#94E3EF',
        ],
        hoverOffset: 4
      },
      {
        label: 'Unpacked',
        data: [56, 88, 22, 88, 40],
        backgroundColor: [
          '#FFA8A8',
        ],
      }
    ],

  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          footer: function(items) {
            return 'Total: ' + items.reduce((a, b) => a + b.parsed.y, 0)
          }
        }
      },
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="branches_canvas"></canvas>

Answer 2

您可以使用afterBody 回调来显示总和。

例子：

var branches_canvas = document.getElementById('branches_canvas').getContext('2d');
var branches = new Chart(branches_canvas, {
    type: 'bar',
    data: {
        labels: ['Org1','Org2','Org3','Org4','Org5'],
        datasets: [
        {
            label: 'Packed',
            data: [12,55,77,32,45],
            backgroundColor: [
                '#94E3EF',
            ],
            hoverOffset: 4
        },
        {
            label: 'Unpacked',
            data: [56,88,22,88,40],
            backgroundColor: [
                '#FFA8A8',
            ],
          }
    ],
      
    },
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        var label = context.dataset.label || '';
                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += context.parsed.y;
                        }
                        return label;
                    },
                    afterBody: (ttItem) => (`Sum: ${ttItem.reduce((acc, val) => (acc + val.raw), 0)}`)
                }
            },
        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
            stacked: true
            }
        },
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="branches_canvas"></canvas>