Javascript 如何使用chartjs 3.2.0显示A2、B2和C2标签？

我正在用chartjs构建一个图形，但我要求它显示堆栈a2、b2、c2的名称

chartjs 3.2.0插件不工作

var ctx=document.getElementById'myChart'.getContext'2d'； var myChart=新的Chartctx{ 类型：'bar'， 数据：{ 标签：['A1'，'B1'，'C1'，'D1'，'E1']， 数据集：[ { 标签：“a3”， 数据：[1,2,3,4,5]， 是的， 堆栈：“A2”， 背景颜色：['rgba255,99132,0.2']， }, { 标签：“b3”， 数据：[6,7,8,9,10]， 堆栈：“A2”， 是的， 背景色：['RGBA54162235,0.2'，]， }, { 标签：“c3”， 数据：[11,12,13,14,15]， 堆栈：“B2”， 是的， 背景颜色：['rgba255，206，86，0.2',， ], } , { 标签：“d3”， 数据：[null，3，7，null，1]， 堆栈：“C2”， 是的， 背景颜色：['rgba75,192,192,0.2'，]， } ] }, };

---

插件不起作用的原因是您没有使用脚本标记和注册来导入和注册它

例如： Chart.registerChartDataLabels； var ctx=document.getElementById'myChart'.getContext'2d'； var myChart=新的Chartctx{ 类型：'bar'， 数据：{ 标签：['A1'，'B1'，'C1'，'D1'，'E1']， 数据集：[{ 标签：“a3”， 数据：[1,2,3,4,5]， 是的， 堆栈：“A2”， 背景颜色：['rgba255,99132,0.2']， }, { 标签：“b3”， 数据：[6,7,8,9,10]， 堆栈：“A2”， 是的， 背景色：['RGBA54162235,0.2'，]， }, { 标签：“c3”， 数据：[11,12,13,14,15]， 堆栈：“B2”， 是的， 背景颜色：['rgba255，206，86，0.2'，]， }, { 标签：“d3”， 数据：[null，3，7，null，1]， 堆栈：“C2”， 是的， 背景颜色：['rgba75,192,192,0.2'，]， } ] } }; 可以定义返回堆栈名称而不是数据值本身的。但是，问题是每个值都会出现堆栈名称。因此，我认为chartjs插件datalabels不允许您完全按照您的要求进行操作

options: {
  plugins: {
    datalabels: {
      align: 'end',
      anchor: 'end',
      formatter: (value, ctx) => {  
        if (value) {
          return ctx.chart.data.datasets[ctx.datasetIndex].stack;
        }            
        return value;
      }
    }
  }
}

请查看下面您的修订代码：

var ctx=document.getElementById'myChart'.getContext'2d'； var myChart=新的Chartctx{ 类型：'bar'， 插件：[ChartDataLabels]， 数据：{ 标签：['A1'，'B1'，'C1'，'D1'，'E1']， 数据集：[{ 标签：“a3”， 数据：[1,2,3,4,5]， 是的， 堆栈：“A2”， 背景颜色：['rgba255,99132,0.2']， }, { 标签：“b3”， 数据：[6,7,8,9,10]， 堆栈：“A2”， 是的， 背景色：['RGBA54162235,0.2'，]， }, { 标签：“c3”， 数据：[11,12,13,14,15]， 堆栈：“B2”， 是的， 背景颜色：['rgba255，206，86，0.2'，]， }, { 标签：“d3”， 数据：[null，3，7，null，1]， 堆栈：“C2”， 是的， 背景颜色：['rgba75,192,192,0.2'，]， } ] }, 选项：{ 插件：{ 数据标签：{ 对齐：“结束”， 主持人:"结束",， 格式化程序：值，ctx=>{ 如果值{ 返回ctx.chart.data.datasets[ctx.datasetIndex].stack； } 返回值； } } } } };