如何在堆积的条形图上显示多个数据标签，并在图表中显示条形图和内联值的总数

Question

我正在尝试使用react-chartjs-2显示堆叠的条形图。我的问题是我无法在中心显示每个堆叠条形的数据标签，但无法在条形顶部显示条形的总数。而且我必须同时显示两个标签

我尝试在X轴的选项中编写回调函数，但它不在条形图的顶部

 <Bar
        ref="barchart"
        data={toJS(this.data)}
        width={170}
        height={85}
        options={{


          title: {
            display: true,
            text: this.title,
            position: "bottom",
            padding: 5
          },
          elements: {
            line: {
              fill: false
            }
          },
          legend: {
            display: true,
            position: "bottom",
            labels: {
              fontSize: 10,
              fontStyle: "bold"
            }
          },
          scales: {
            yAxes: [
              {
                display: false,
                gridLines: {
                  display: false
                },
                stacked: true,
                ticks: {
                  beginAtZero: true
                }
              }
            ],
            xAxes: [
              {
                display: true,
                gridLines: {
                  display: false
                },
                maxBarThickness: 50,
                stacked: true,
                ticks: {
                  fontSize: 10
                }
              },
              {
                display: true,
                stacked: true,
                maxBarThickness: 50,
                gridLines: {
                  offsetGridLines: false,
                  display: false
                },
                ticks: {
                  fontColor: "#fff"
                }
              },
              {
                type: "category",
                offset: true,
                position: "top",
                ticks: {
                  fontColor: "black",
                  callback: (value, index, values) => {

                    if (this.data.datasets.length > 1) {

                      return (
                        this.data.datasets[0].data[index] +
                        this.data.datasets[1].data[index]
                      );
                    }
                  }
                },
                gridLines: {
                  display: false
                }
              }
            ]
          },
          maintainAspectRatio: true,
          plugins: {
            datalabels: {
              anchor: "center",
              align: "center"
            },
            afterDraw: (chartInstance, easing) => {
              debugger;
              const ctx = chartInstance.chart.ctx;
              ctx.fillText("This text drawn by a plugin", 100, 100);
            }
          },
          layout: {
            padding: {
              top: 35
            }
          }
        }}
      />