3

我在我的角度应用程序中使用 ngx-charts。

我正在使用垂直条形图来显示。我将名称作为日期,将值作为数字,即

export class VBChartData {
    name: string;
    value: number;
}

VB图表组件是,

export class VbChartComponent implements OnInit{
 public data: VBChartData[] = [];
 view: any[] = [1000, 500];
 public activeToday: string[] = [];
 showXAxis = true;
   showYAxis = true;
   gradient = false;
   showLegend = true;
   showXAxisLabel = true;
   xAxisLabel = 'Date';
   showYAxisLabel = true;
   yAxisLabel = 'Rides';
   colorScheme = {
    domain: ['#448AFF']
  };
  constructor() {
     const tdate = Date.now();
    this.todayDate = new DatePipe('en-Us').transform(tdate, 'yyyy-MM-dd');
    this.activeToday.push(this.todayDate);
    this.activeToday.push('2018-06-15');
   // getting the this.data as array from the service
   Object.assign(this.data);
  }

ngOnInit() {
  }

  onSelect(event) {
    console.log(event);
  }
}

图表html是,

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="data"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [legendTitle]="title"
  [animations]="true" 
  [activeEntries]="activeToday"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical>

此处activeEntries更新为activeToday, 在组件中更新。

但在图表中,突出显示没有发生。如果我错了,请纠正我。

4

0 回答 0