ngx-charts

Question

我正在使用 Angular 和 ngx-charts 来显示从服务器中提取的一些数据。
在第一次加载时，当 ngOnInit() 方法触发对服务器的请求时 (getStats())，一切都按应有的方式加载：

但是当 Get Data 按钮被点击时，同样的请求被发送到服务器（getStats()），table 被重新呈现如下：

条形线变细了。

Html:

<div class="row shadow">
    <div class="col" style="height: 80vh; width: 100%;"> 
        <ngx-charts-bar-horizontal
            [scheme]="colorScheme"
            [results]="data"
            [gradient]="gradient"
            [xAxis]="showXAxis"
            [yAxis]="showYAxis"
            [legend]="showLegend"
            [showXAxisLabel]="showXAxisLabel"
            [showYAxisLabel]="showYAxisLabel"
            [xAxisLabel]="xAxisLabel"
            [yAxisLabel]="yAxisLabel"
            (select)="onSelect($event)">
        </ngx-charts-bar-horizontal>                                
    </div>
</div>

TS 代码：

    export class StatsComponent implements OnInit {

  constructor(
    private adminService: AdminService,
    private toastr: ToastrService,
    private datePipe: DatePipe,
    private formBulder: FormBuilder,
    private changeDetection: ChangeDetectorRef ) { }

    days = 7; // Days you want to subtract
    date = new Date();
    endMonth = this.date.getUTCMonth() + 1; //months from 1-12
    endDay = this.date.getUTCDate();
    endyear = this.date.getUTCFullYear();
    endDate = this.endyear + '/' + this.endMonth + '/' + this.endDay;
    last = new Date(this.date.getTime() - (this.days * 24 * 60 * 60 * 1000));
    startDay = this.last.getDate();
    startMonth= this.last.getMonth()+1;
    startYear = this.last.getFullYear();
    startDate = this.startYear + '/' + this.startMonth + '/' + this.startDay;

  statsSearchFrom = this.formBulder.group({
    startTime: [this.startDate, Validators.required],
    endTime: [this.endDate, Validators.required]
  });

  agents: User[];
  data: any[] = [];
  multi: any[];
  // view: any[] = [100%, 800];
  // bar chart options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Number of Tickets';
  showYAxisLabel = true;
  yAxisLabel = 'Agent';

  colorScheme = {
    domain: ['#263859', '#a7d129', '#21e6c1', '#278ea5', '#7045af', '#e14594', '#ed6363', '#3c6562']
  };

  ngOnInit() {
    this.getAllAgents();
  }

  getStats() {
    const startTime = this.datePipe.transform(this.statsSearchFrom.controls['startTime'].value, 'ddMMyyyy');
    const endTime = this.datePipe.transform(this.statsSearchFrom.controls['endTime'].value, 'ddMMyyyy');
    this.adminService.getAgentStats(this.agents, startTime, endTime).subscribe(response => {
      this.agents = response;
      for (const agent of this.agents) {
        const point: any = {'name': agent.username, 'value': agent.nbOfClosedEmails};
        this.data.push(point);
      }
      this.data = [...this.data];
    }, error => {
      this.toastr.error('Error while getting the statistics.')
    });
  }

  getAllAgents() {
    this.adminService.getAllAgents().subscribe(response => {
      this.agents = response;
      this.agents = [...this.agents];
      this.getStats();
    }, error => {
      this.toastr.error('Error while getting the agents.');
      console.error(error);
    });
  }```

Answer 1

问题出在 ngx-charts barPadding 参数上。将其设置为固定值后，条的粗细在每次请求时都保持不变。

要解决此问题，请添加： [barPadding]="1" 到 html <ngx-charts-bar-horizontal> 元素。

ngx-charts - 数据更新时水平条形图条厚度变化

ngx-charts - Horizontal Bar Charts bar thickness changes on data update

angular

typescript