angularjs - Se Chartjs 水平

问题描述

我想使用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 轴文本，这可能吗？

标签： angularjschart.jsionic4

看来你还在用Chart.js version 2。当前最新版本是3.5.1.

换成type: 'bar'它type: 'horizontalBar'应该可以工作。

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

有关详细信息，请参阅文档中的水平条形图Chart.js v2.9.4。

angularjs - Se Chartjs 水平

问题描述

解决方案

推荐阅读