Angular 2 ng 2 Charts 如何动态更改 x 轴值？

Question

我可以更改 y 轴的值，但我想更改 x 轴的值。 我想要 ['step1', 'step2' .... ] x 轴上的这些值。 我附上了我的完整代码。 我在角度 2 中使用 ng 2 图表。 我想创建水平条形图。

ng2 图表的 NPM 安装命令

npm install ng2-charts --save

HTML代码：

   <div class="card container">

  <div class="headercontainer">
<div class="heading">
<img src="/assets/imgs/bala.jpg"><span>User Details</span>
</div>
<div class="btncontainer">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
      <button class="btn">#</button>
</div>
  </div>
   <div style="display: block">
      <canvas baseChart
              [datasets]="barChartData"
              [colors]="colors"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>

  </div>
</div>

Ts 代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {
  public barChartData:any[] = [
    {
      label: "Project Progress Level",
      data: [8, 19, 3, 5, 2, 3]


    }
  ];

    private colors = [
    {
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(0, 255, 0, 0.2)',
        'rgba(102, 0, 204, 0.2)',
        'rgba(255, 128, 0, 0.2)'
      ]
    }
  ];

 private tempLabels:string[]=["d1","d2","d3","d4","d5","d6"];

  ngOnInit(): void {

  }
  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    showAllTooltips:true,
    responsive: true,
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }


  };
  public barChartLabels:string[] = ['start', 'pro1', 'pro2', 'pro3', 'pro4', 'pro5', 'cmpleted'];
  public barChartType:string = 'horizontalBar';
  public barChartLegend:boolean = false;


  // events
  public chartClicked(e:any):void {
  }

  public chartHovered(e:any):void {
  }

}

然后我也附上了我的输出图像。能否请您参考一下并给我答案。

我的输出图像：

Answer 1

首先获取数组的 X 轴数据。假设您将这些值放入 tempLabels 数组中。然后试试这个。这很好用。如果您在尝试此操作后有任何问题，请告诉我。

 this.barChartLabels.length = 0;
       for (let i = 0; i < this.tempLabels.length; i++) {
           this.barChartLabels.push(this.tempLabels[i]);
   }