与Chart.js的堆叠条图表中仅在顶级栏上显示标签

Question

我正在使用JS和Chart.js在HTML中制作堆叠的条形图。对于此图表，我不需要轴或多个堆叠的条（仅一个）。我想出了如何完成所有这些和自定义标签的方法，但是我只希望标签在顶级栏中显示（此示例中的红色栏）。我该如何仅在顶级栏中显示标签？我不太确定格式化的事情是如何工作的，我只是复制并粘贴了它，它显示了我想要的信息。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-8 offset-2 my-5">
        <div class="card">
            <div class="card-body">
                Stacked Bar Chart in Chart JS
                <hr>
                <canvas id="barchart"></canvas>
            </div>
        </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
const ctx = document.getElementById('barchart').getContext('2d');
const myChart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  type: 'bar',
  data: {
      labels: [1],
      datasets: [{
          label: 'Hypo',
          data: [12],
          backgroundColor: [
              'red',
          ],
          borderColor: [
              'red',
          ],
          borderWidth: 1
      }, {
          label: 'Hyper',
          data: [12],
          backgroundColor: [
              'orange',
          ],
          borderColor: [
              'orange',
          ],
          borderWidth: 1
      }]
  },
  options: {
      plugins: {
          legend: {
              display: false
          },
          datalabels: {
              color: 'black', 
              labels: {
                  title: {
                      font: {
                          family: "sans-serif",
                          size: 100,
                          weight: 'bold'
                      }
                  }
              },
              formatter: function(value, context) {
                  return context.chart.data.labels[context.dataIndex];
              }
          }
      },
      scales: {
          x: {
              stacked: true,
              display: false,
          },
          y: {
              beginAtZero: true,
              stacked: true,
              display: false,
          },
      }
  }
});
</script>

Answer 1

我最终自己弄清楚了这个答案。我更改了格式化函数：

formatter: function(value, context) {
   return context.datasetIndex == 1 ? context.chart.data.labels[context.dataIndex] : ' ';
}