Chart.js（堆積條形圖） 如何計算工具提示中標簽的總和？

Question

我正在嘗試計算並顯示已打包和未打包標簽的總和

我已經計算了標簽的值，但是不知道如何在工具提示中插入新的 label

因為在新版本的Chart.js 上，我可以通過設置>插件>工具提示訪問工具提示，但在回調中我只得到了一個 label 的數據集

圖表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回調可用於修改特定的 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>

Answer 3

以下工具提示為我做了（使用包含您的數據集和其他信息的 chardata）：

tooltip: {
    callbacks: {
      footer: function(items) {
        var total = 0;
        for (var i = 0; i < chartData['datasets'].length; i++){
            total += chartData['datasets'][i].data[items[0].dataIndex];
        }
        return 'Total: ' + total 
      }
    }
}