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

Question

我正在尝试计算并显示已打包和未打包标签的总和

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

因为在新版本的Chart.js 上，我可以通过settings> plugins> tooltip访问工具提示，但在回调中我只得到了一个标签的数据集

图表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>

标签： javascriptchart.jsbar-chart

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>