Se Chartjs 横向

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: 'bar',
      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轴在X轴上，每个条形图上方使用当前X轴，就像第一张照片一样？此致

更新

正如我目前使用的下面的评论Chartjs V 2.9.4，现在可以使用了，图表是水平方向的

现在，我需要在每个条形图上方放置 Y 轴文本，这可能吗？

Answer 1

添加这个：

options: {
    indexAxis: 'y',
    ...
}

Here 是 ChartJS 文档

Answer 2

您似乎还在使用 Chart.js version 2。当前最新版本为3.5.1.

将 type: 'bar' 更改为 type: 'horizontalBar' 应该可以。

new Chart(this.ctx1, {
  type: 'horizontalBar',
  ...

For further details, please consult Horizontal Bar Chart from the Chart.js v2.9.4 documentation.

Se Chartjs 横向

Se Chartjs horizontal

angularjs

chart.js

ionic4