使用 Chart.js 库在每个条的顶部设置 Y 轴

Question

我有一个水平条形图，我想要的结果就像这张照片使用 Chartjs 库

这是以下代码：

TS:

 createAreaChart() {
this.barChart1 = document.getElementById('barChart1');
this.ctx1 = this.barChart1.getContext('2d');

 let i = 0;
this.data1.forEach(div => {
  if(i==0){
    this.backgroundColors.push('#A60A2D');
  } if(i==1) {
    this.backgroundColors.push('#00A2C3');
  } if(i==2) {
    this.backgroundColors.push('#434F55');
    i = -1;
  }
  i++;
});

this.chart1 = new Chart(this.ctx1, {
      type: 'horizontalBar',
      data: {
        labels: this.data1.map(r => r.icon),
        datasets: [{
          data: this.data1.map(r => r.total),
          label: 'Annual Cost',
          backgroundColor: this.backgroundColors,
          borderColor: this.backgroundColors,
          borderWidth: 1
        }]
      },
      options: {
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label: function(tooltipItem, data) {
              var value = data.datasets[0].data[tooltipItem.index];
              if (parseInt(value) >= 1000) {
                return '$' + value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              } else {
                return '$' + value.toFixed(2).toString();
              }
            }
          }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              precision: 2,
              userCallback : function(value, index, values) {
                if(parseInt(value) >= 1000){
                  return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                } else {
                  return '$' + value;
                }
              }
            }
          }]
        }
      }
    });
    this.chart1.height = 225;

    }

HTML

<div class="card chart-card">
      <div class="card-header">
        <div class="card-title">Test</div>
      </div>
      <div class="card-body">
        <div class="chart">
          <canvas id="barChart1" height="220px"></canvas>
        </div>
      </div>
    </div>

结果

我需要在每个条形图上方放置 Y 轴文本，我该如何实现？

作为我尝试使用的其他答案：

layout: {
        padding: {
          left: 0,
          right: 0,
          top: 15,
          bottom: 0
        }
      }

或

plugins: {
        datalabels: {
          anchor: 'end',
          align: 'top',
          formatter: Math.round,
          font: {
            weight: 'bold'
          }
        }
      }

但是没有效果，我需要怎么做才能达到预期的效果？

Answer 1

这主要可以通过scales.yAxes.ticks选项的不同选项来完成。

For further details, consult Tick Configuration from the Chart.js v2.9.4 documentation.

请查看下面的可运行代码，看看它是如何工作的。

new Chart('myChart', {
  type: 'horizontalBar',
  data: {
    labels: ['One', 'Two', 'Three'],
    datasets: [{
      data: [8, 12, 7],
      backgroundColor: ['#A60A2D', '#00A2C3', '#434F55'],
      barPercentage: 0.6
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          drawOnChartArea: false
        },
        ticks: {
          min: 0
        }
      }],
      yAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          mirror: true,
          fontSize: 18,
          labelOffset: -22
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

使用 Chart.js 库在每个条的顶部设置 Y 轴

Set Y axis at the top of each bar using Chart.js library

charts

bar-chart

chart.js

angular

ionic4