Question

我正在使用带有datalabels插件的chart.js，但在每个堆叠的条上显示一个标签时遇到了问题。

我尝试访问数据集元数据以区分以显示标签，但仍难以实现。帮我做。请在此处查看我的示例：https://jsfiddle.net/fraserr/9ezggxx5/314/

var datasets = JSON.parse('[{"username":"test name","stack":"2","label":"test name - actual","dataset":{"2018-12-17":"3","2018-12-24":"1"},"data":["3","1"],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"test name","stack":"2","label":"test name - target","dataset":{"2018-12-17":"10","2018-12-24":"10"},"data":["10","10"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - actual","dataset":{"2018-12-17":"2","2018-12-24":0},"data":["2",0],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - target","dataset":{"2018-12-17":"2","2018-12-24":"2"},"data":["2","2"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1}]');

new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['2018-12-17', '2018-12-24'],
    datasets: datasets
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          suggestedMax: 50
        }
      }],
      yAxes: [{
        stacked: true
      }]
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          return ctx.dataset.username;
        },
        align: 'end',
        anchor: 'end',
      }
    }
  }
});

我想要的结果是在第一栏的顶部具有“测试名称”，在第二栏具有“圣诞老人”，在第三栏具有“测试名称”，在第四栏具有“圣诞老人”。理想情况下，我总是每条显示一个标签（即使每叠显示一个条也被隐藏）。

谢谢！

Chart.js每堆叠条形一个标签

0 个答案: