Question

大家好，我正在使用Angular 7，chart.js和chartjs-plugin-datalabels创建一个包含条形图的仪表板正如您在picture中看到的，条形图包含不同的数据集，每个数据集都有其自己的标签，我想在条形图的顶部显示每个标签上的标签及其值，但我不知道我的代码如何告诉我数据集的标签
正如我在代码（.ts）文件中看到的那样，我的意思是

this.chartdef= new Chart('defaut',
          {
            type:'bar',

            options:{
              cutoutPercentage:40,
              responsive :true,

              title:{
                display:true,
                text:'TRG VAGUE'
              },
              plugins:{
                datalabels:{
                  align:'top',
                  display: 'true',
                  color:'#ffffff',

                }
              }


            },
            data:{
              labels:['poste1','poste2','poste3'],
              datasets:[
                {
                  label:'REPERTOP01',
                  data:[10,7.5,4.5],
                  backgroundColor:'rgba(255, 0, 0,1)',
                  borderColor:'rgba(255, 0, 0,0.6)',
                  borderWidth:1,
                  fill:false,
                  datalabels: {
                    align: 'end',
                    anchor: 'end',


                    formatter: function(value, context) {
                      return context.chart.data.labels[context.dataIndex];
                    }

                  }

                },
                {
                  label:'REPERTOP02',
                  data:[4.5,0,1],
                  backgroundColor:'rgba(255, 102, 0,1)',
                  borderColor:'rgba(255, 102, 0,0.6)',
                  fill:false,
                  borderWidth:1
                },
                {
                  label:'REPERTOP02',
                  data:[4.5,0,0],
                  backgroundColor:'rgba(255, 225, 0,1)',
                  borderColor:'rgba(255, 225, 0,0.6)',
                  fill:false,
                  borderWidth:1
                }
              ]

            }
          })

和html文件

<div class="container-fluid">
  <canvas id="defaut" height="40px"  width="100%">

  </canvas>
</div>

我有3个数据集，我想在每个小节的顶部显示其标签，例如REPERTOP01，但此代码在小节的顶部显示poste1，如果我在标签上显示值消失了，那么我如何显示REPERTOP01而不是poste1 poste2和poste3并在栏中显示值

Answer 1

对于文本标签问题，您需要更改自定义格式器以返回数据集标签：

formatter: function(value, context) {
  return context.chart.data.datasets[context.dataIndex].label;
}

据我所知，datalabels插件每条不支持多个标签。您需要按照以下这样的答案手动绘制一个标签：directly disallowing it in their Terms of Use。

我如何在条形图上同时显示标签和值

1 个答案: