Question

我尝试在同一时间使用数据标签和叠加条形图中的总和显示。

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

以上只是数据标签：

以上只是总和：

我希望两者都在同一张图表中。

我使用跟随技巧来总结显示：

<script>
    const totalizer = {
  id: 'totalizer',

  beforeUpdate: chart => {
    let totals = {}
    let utmost = 0

    chart.data.datasets.forEach((dataset, datasetIndex) => {
      if (chart.isDatasetVisible(datasetIndex)) {
        utmost = datasetIndex
        dataset.data.forEach((value, index) => {
          totals[index] = (totals[index] || 0) + value
        })
      }
    })

    chart.$totalizer = {
      totals: totals,
      utmost: utmost
    }
  }
}

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

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

Answer 1

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

我添加了新的数据集来表示backgroundColor透明的“总数据”，并在我的数据集中添加以下代码Total：

        datalabels: {
            backgroundColor: function (context) {

                return 'rgba(244,50,49)';

            },
            formatter: (value, ctx) => {
                const total = ctx.chart.$totalizer.totals[ctx.dataIndex];
                return total.toLocaleString('fr-FR', {})
            },
            align: 'end',
            anchor: 'end',
            display: function (ctx) {
                return ctx.datasetIndex === ctx.chart.$totalizer.utmost
            }

完整代码：

<script>
    const totalizer = {
    id: 'totalizer',
    beforeUpdate: chart => {
        let totals = {}
        let utmost = 0

            chart.data.datasets.forEach((dataset, datasetIndex) => {
                if (chart.isDatasetVisible(datasetIndex)) {
                    utmost = datasetIndex
                        dataset.data.forEach((value, index) => {
                            totals[index] = (totals[index] || 0) + value
                        })
                }
            })
            chart.$totalizer = {
            totals: totals,
            utmost: utmost
        }
    }
}

new Chart('chart', {
    type: 'bar',
    data: {
        labels: ["Note par thème du répondant", "Note par thème sectorielle", "Note par thème générale"],
        datasets: [{
                label: 'Thème 1',
                data: [10, 10, 10],
                backgroundColor: 'rgba(68,114,196,0.6)'
            }, {
                label: 'Thème 2',
                data: [13, 8, 11],
                backgroundColor: 'rgba(237,125,49,0.6)'
            }, {
                label: 'Thème 3',
                data: [5, 12, 13],
                backgroundColor: 'rgba(165,165,165,0.6)'
            }, {
                label: 'Thème 4',
                data: [9, 12, 13],
                backgroundColor: 'rgba(255,192,0,0.6)'
            }, {
                label: 'Thème 5',
                data: [5, 12, 9],
                backgroundColor: 'rgba(91,155,213,0.6)'
            }, {
                label: 'Thème 6',
                data: [9, 12, 5],
                backgroundColor: 'rgba(112,173,71,0.6)'
            }, {
                label: 'Thème 7',
                data: [5, 12, 10],
                backgroundColor: 'rgba(38,68,120,0.6)'
            }, {
                label: 'Thème 8',
                data: [15, 12, 10],
                backgroundColor: 'rgba(99,99,99,0.6)'
            }, {
                label: 'Thème 9',
                data: [15, 12, 11],
                backgroundColor: 'rgba(37,94,145,0.6)'
            }, {
                label: 'Thème 10',
                data: [10, 4, 7],
                backgroundColor: 'rgba(24,91,62,0.6)'
            }, {
                label: 'Total',
                data: [0, 0, 0],
                backgroundColor: 'rgba(24,91,62,0)',
                datalabels: {
                    backgroundColor: function (context) {

                        return 'rgba(244,50,49)';

                    },
                    formatter: (value, ctx) => {
                        const total = ctx.chart.$totalizer.totals[ctx.dataIndex];
                        return total.toLocaleString('fr-FR', {})
                    },
                    align: 'end',
                    anchor: 'end',
                    display: function (ctx) {
                        return ctx.datasetIndex === ctx.chart.$totalizer.utmost
                    }
                }
            }
        ]
    },
    options: {
        title: {

            text: "Mon titre",

            display: true
        },
        scales: {
            yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true,
                        suggestedMax: 100
                    }
                }
            ],
            xAxes: [{
                    stacked: true
                }
            ]
        },
        plugins: {
            datalabels: {

                color: 'rgba(255,255,255)',

                display: function (context) {
                    return context.chart.isDatasetVisible(context.datasetIndex);
                },
                backgroundColor: function (context) {
                    return context.dataset.backgroundColor;
                },
                borderRadius: 4,
                font: {
                    weight: 'bold'
                }
            }
        }
    },
    plugins: [totalizer]
});
 </script>

Answer 2

太好了！我只是简化了解决方案，而无需添加肥料：

datasets:  {
    label: 'Total',
    data: [120, 120, 120, 120, 120, 120, 120, 120, 120, 120],
    backgroundColor: 'rgba(24,91,62,0)',
    datalabels: {
        backgroundColor: () => 'white',
        formatter: (value, ctx) => {
            let total = 0;
            let index = ctx.dataIndex;
            data.datasets.map((d, i) => {
                if (i === 2) return;
                total += d.data[index];
            });
            return total;
        },
        align: 'end',
        anchor: 'end',
        padding: 0,
    },
},

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

2 个答案: