使用Chart.js在堆积条形图中仅在顶部条形上显示标签

dwbf0jvd  于 2022-11-23  发布在  Chart.js
关注(0)|答案(1)|浏览(210)

我正在使用JS和Chart.js在HTML中制作堆叠条形图。对于此图表,我不需要轴或多个堆叠条形图(只有一个)。我想出了如何做所有这些和自定义标签,但我只希望标签显示在顶栏中(本例中为红色条)如何才能只在顶部条中显示标签呢?我不太清楚格式化程序是如何工作的,我只是复制并粘贴它,它显示的信息,我正在寻找。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/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/chartjs-plugin-datalabels@2.0.0"></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>
slsn1g29

slsn1g291#

最后我自己找到了这个问题的答案。我把格式化程序函数改为:

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

相关问题