ChartJS LWC图表:如何在单个水平堆叠条形图中的每个条形下方显示数据集标签

ifmq2ha2  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(167)

我已经用ChartJS v2.8.0版本使用LwC构建了一个水平堆叠条形图,现在我想在下面的条形图上显示数据集标签,如“已完成”,“等待”,"进行中“。下面是我尝试实现的屏幕截图示例:Stacked bar chart example/expected outcome
下面是代码:

Chart.plugins.register(ChartDataLabels);
new Chart(
 document.getElementById('myChart'),
 {
  type: 'horizontalBar',
  data: {
    labels: ["#count"],
    datasets: [
      {
        label: 'Completed',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "blue",
        data: [10],
      },
      {
        label: 'In Progress',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "blue",
        data: [65],
      },
      {
        label: 'Waiting',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "blue",
        data: [80],
      },
    ]
  },
  options: {
  indexAxis: 'x',
  scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      },
    resposive:true,
    plugins: {
      datalabels: {
        clamp: true,
        color: "black",
        labels: {
          title: {
            font: {
              weight: "bold"
            }
          }
        }
      }
    }
  }
});

下面是我运行代码时的屏幕截图:screenshot
有人能建议我如何在条形下方显示数据集标签吗?

cnwbcb6i

cnwbcb6i1#

您可以利用数据标签插件的alignoffsetformatter选项。此外,您可能需要定义2个标签,一个用于数字,一个用于数据集标签。
第一个

相关问题