Question

如何删除图表中的秒数显示？我有一个图表，其中时间以hh.mm.ss格式显示。

这是有关如何绘制图表的完整代码。

ts：

 @ViewChild('state') stateRef: ElementRef

  ngAfterViewInit() {

    const densityConfig: any = {
      label: 'Density',
      backgroundColor: 'rgba(0, 150, 136, .2)',
      borderColor: 'rgba(0, 121, 107, .7)',
      borderWidth: 2
    }

    const visconsityConfig: any = {
      label: 'Visconsity',
      backgroundColor: 'rgba(0, 137, 132, .2)',
      borderColor: 'rgba(0, 10, 130, .7)',
      borderWidth: 2
    }

    const stateTimeConfig: any = {
      datasets: [ visconsityConfig, densityConfig]
    }

    this.stateService.fetch().subscribe((data: State[]) => {
      densityConfig.data = data.map(item => item.density)
      visconsityConfig.data = data.map(item => item.visconsity)
      stateTimeConfig.labels = data.map(item => item.state_time)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')

      new Chart(stateCtx, {
        type: 'line',
        data: stateTimeConfig,
        options: {
          responsive: true
        }
      })
    })
  }

html：

<div *ngIf="states">
  <canvas  #state></canvas>
</div>

state_time负责时间。

Answer 1

您将使用Angular内置的日期管道：

我创建了一个简短的StackBlitz to see it

为简洁起见，做了一些小的更改，但您可以在此处看到重要的内容：

ts文件只是一个日期数组：

  labels: Date[] = [new Date('2018/10,5 01:15:31'), 
     new Date('2017/2/25 01:15:10'), new Date('2001/1/1 12:10:01')];
  }

并且html文件是：

<div *ngFor="let date of labels">
  Short Time: {{date | date:'shortTime'}} 
  hhmm: {{date | date:'HH:mm'}} 
</div>

有关Date Pipe

可用格式的更多信息

更新

看到这是Angularjs，或者至少在后端，我认为最好的选择是使用Javascript：

stateTimeConfig.labels = data.map(item => item.state_time.toLocaleTimeString([],
     {hour: '2-digit', minute:'2-digit', hour12:false}))

小时是HH，为2位数。分钟和12点表示在奇怪的12小时制上对我们这些人来说，它将显示12:15而不是AM / PM 12:15。如果您想要AM / PM，则只需将该选项留空即可。

如何更改图表中的时间格式？

1 个答案:

更新