如何在堆叠条上同时显示数据标签和总和

Question

我尝试在堆叠条形图中同时显示数据标签和总和。

\n\n

我使用 Chartjs-plugin-datalabels.js 来显示数据标签或总和。

\n\n

上面只是带有数据标签：\n

\n\n

上面只是总和：\n

\n\n

我希望将两者放在同一个图表中。

\n\n

我使用以下技巧来求和显示：

\n\n

<script>\n    const totalizer = {\n  id: \'totalizer\',\n\n  beforeUpdate: chart => {\n    let totals = {}\n    let utmost = 0\n\n    chart.data.datasets.forEach((dataset, datasetIndex) => {\n      if (chart.isDatasetVisible(datasetIndex)) {\n        utmost = datasetIndex\n        dataset.data.forEach((value, index) => {\n          totals[index] = (totals[index] || 0) + value\n        })\n      }\n    })\n\n    chart.$totalizer = {\n      totals: totals,\n      utmost: utmost\n    }\n  }\n}\n\nnew Chart(\'chart\', {\n  type: \'bar\',\n  data: {\n    labels: ["Note par th\xc3\xa8me du r\xc3\xa9pondant", "Note par th\xc3\xa8me sectorielle", "Note par th\xc3\xa8me g\xc3\xa9n\xc3\xa9rale"],\n    datasets: [{\n            label: \'Th\xc3\xa8me 1\',\n            data: [12, 19, 3],\n            backgroundColor: \'rgba(255, 206, 86)\'            \n        },\n        {\n            label: \'Th\xc3\xa8me 2\',\n            data: [3,8,1],\n            backgroundColor: \'rgba(54, 162, 235)\'                        \n        },\n        {\n            label: \'Th\xc3\xa8me 3\',\n            data: [ 5, 2, 3],\n            backgroundColor: \'rgba(255, 255, 132)\'                \n        },{\n            label: \'Th\xc3\xa8me 4\',\n            data: [ 5, 2, 3],\n            backgroundColor: \'rgba(255, 99, 255)\'                \n        },{\n            label: \'Th\xc3\xa8me 5\',\n            data: [ 5, 2, 3],\n            backgroundColor: \'rgba(100, 250, 132)\'                \n        },{\n            label: \'Th\xc3\xa8me 6\',\n            data: [ 5, 2, 3],\n            backgroundColor: \'rgba(89, 99, 132)\'                \n        },{\n            label: \'Th\xc3\xa8me 7\',\n            data: [ 5, 2, 3],\n            backgroundColor: \'rgba(255, 0, 132)\'                \n        },{\n            label: \'Th\xc3\xa8me 8\',\n            data: [ 5, 2, 3],\n            backgroundColor: \'rgba(0, 150, 255)\'                \n        },{\n            label: \'Th\xc3\xa8me 9\',\n            data: [ 5, 2, 3],\n            backgroundColor: \'rgba(100, 100, 100)\'                \n        },{\n            label: \'Th\xc3\xa8me 10\',\n            data: [ 10, 4, 7],\n            backgroundColor: \'rgba(255, 255, 0)\'                \n        }]\n  },\n  options: {\n    title :{\n        display :true,\n        text : "Mon titre"\n    },\n    scales: {   \n      yAxes: [{\n        stacked: true,\n        ticks: {\n          beginAtZero: true,\n          suggestedMax: 100\n        }\n      }],\n      xAxes: [{\n        stacked: true\n      }]\n    },\n    plugins: {\n      datalabels: {\n        formatter: (value, ctx) => {\n          const total = ctx.chart.$totalizer.totals[ctx.dataIndex]\n          return total.toLocaleString(\'fr-FR\', {})\n        },\n        align: \'end\',\n        anchor: \'end\',\n        display: function(ctx) {\n          return ctx.datasetIndex === ctx.chart.$totalizer.utmost\n        }\n      }\n    }\n  },\n  plugins: [totalizer]\n});\n    </script>\n

\n\n

我将不胜感激任何帮助。谢谢！

\n

Answer 1

\n\n

好的，我找到了一种同时显示 Sum 和 datalabels 的方法。

\n\n

我添加新的数据集来表示具有透明背景颜色的“总数据”，并在我的数据集总计中添加以下代码：

\n\n

        datalabels: {\n            backgroundColor: function (context) {\n\n                return \'rgba(244,50,49)\';\n\n            },\n            formatter: (value, ctx) => {\n                const total = ctx.chart.$totalizer.totals[ctx.dataIndex];\n                return total.toLocaleString(\'fr-FR\', {})\n            },\n            align: \'end\',\n            anchor: \'end\',\n            display: function (ctx) {\n                return ctx.datasetIndex === ctx.chart.$totalizer.utmost\n            }\n

\n\n

完整代码如下：

\n\n

<script>\n    const totalizer = {\n    id: \'totalizer\',\n    beforeUpdate: chart => {\n        let totals = {}\n        let utmost = 0\n\n            chart.data.datasets.forEach((dataset, datasetIndex) => {\n                if (chart.isDatasetVisible(datasetIndex)) {\n                    utmost = datasetIndex\n                        dataset.data.forEach((value, index) => {\n                            totals[index] = (totals[index] || 0) + value\n                        })\n                }\n            })\n            chart.$totalizer = {\n            totals: totals,\n            utmost: utmost\n        }\n    }\n}\n\nnew Chart(\'chart\', {\n    type: \'bar\',\n    data: {\n        labels: ["Note par th\xc3\xa8me du r\xc3\xa9pondant", "Note par th\xc3\xa8me sectorielle", "Note par th\xc3\xa8me g\xc3\xa9n\xc3\xa9rale"],\n        datasets: [{\n                label: \'Th\xc3\xa8me 1\',\n                data: [10, 10, 10],\n                backgroundColor: \'rgba(68,114,196,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 2\',\n                data: [13, 8, 11],\n                backgroundColor: \'rgba(237,125,49,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 3\',\n                data: [5, 12, 13],\n                backgroundColor: \'rgba(165,165,165,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 4\',\n                data: [9, 12, 13],\n                backgroundColor: \'rgba(255,192,0,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 5\',\n                data: [5, 12, 9],\n                backgroundColor: \'rgba(91,155,213,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 6\',\n                data: [9, 12, 5],\n                backgroundColor: \'rgba(112,173,71,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 7\',\n                data: [5, 12, 10],\n                backgroundColor: \'rgba(38,68,120,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 8\',\n                data: [15, 12, 10],\n                backgroundColor: \'rgba(99,99,99,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 9\',\n                data: [15, 12, 11],\n                backgroundColor: \'rgba(37,94,145,0.6)\'\n            }, {\n                label: \'Th\xc3\xa8me 10\',\n                data: [10, 4, 7],\n                backgroundColor: \'rgba(24,91,62,0.6)\'\n            }, {\n                label: \'Total\',\n                data: [0, 0, 0],\n                backgroundColor: \'rgba(24,91,62,0)\',\n                datalabels: {\n                    backgroundColor: function (context) {\n\n                        return \'rgba(244,50,49)\';\n\n                    },\n                    formatter: (value, ctx) => {\n                        const total = ctx.chart.$totalizer.totals[ctx.dataIndex];\n                        return total.toLocaleString(\'fr-FR\', {})\n                    },\n                    align: \'end\',\n                    anchor: \'end\',\n                    display: function (ctx) {\n                        return ctx.datasetIndex === ctx.chart.$totalizer.utmost\n                    }\n                }\n            }\n        ]\n    },\n    options: {\n        title: {\n\n            text: "Mon titre",\n\n            display: true\n        },\n        scales: {\n            yAxes: [{\n                    stacked: true,\n                    ticks: {\n                        beginAtZero: true,\n                        suggestedMax: 100\n                    }\n                }\n            ],\n            xAxes: [{\n                    stacked: true\n                }\n            ]\n        },\n        plugins: {\n            datalabels: {\n\n                color: \'rgba(255,255,255)\',\n\n                display: function (context) {\n                    return context.chart.isDatasetVisible(context.datasetIndex);\n                },\n                backgroundColor: function (context) {\n                    return context.dataset.backgroundColor;\n                },\n                borderRadius: 4,\n                font: {\n                    weight: \'bold\'\n                }\n            }\n        }\n    },\n    plugins: [totalizer]\n});\n </script>\n

\n