使用Ng2图表创建折线图,其中X轴显示日期,y轴显示某些事件的计数

问题描述

我对角度非常陌生,我想创建一个折线图,其中x轴将显示日期,y轴将显示计数,我正在使用linq查询从角度6的数据库和ng2图表包中获取数据创建UI。我的查询如下:

 var allExtractedDoc = await _docCogExtractionMetrics.GetAllListAsync ();
          
        var ExtractionRate = allExtractedDoc.GroupBy (t => t.CreationTime.Date).
        Select (e => new DocExtDto {
            Total = e.Count (),CreationTime = e.Key,ExtractionsPerDay = e.Count (g => g.Result),}).ToList ();

我想在折线图上显示每天进行的提取,但是图表应该仅显示自当前日期起的最近30天的数据,目前我的图表正在填充数据库中所有可用日期的数据,甚至也包括去年的日期。

我的角度代码如下:

 public lineChartOptions = {
        responsive: true,scales: {
            xAxes: [{
                type: 'time',time: {
                    unit: 'month'
                }
            }]
        }
    };
 public lineChartType = 'line';
    public lineChartLegend = true;
    public lineChartPlugins = [];

    public lineChartColors: Color[] = [
        {
            borderColor: 'black',backgroundColor: 'rgba(255,255,0.28)',},];
    public lineChartLabels: string[] = [
    ];
    public lineChartData: any[] = [
        { data: [],label: 'Extractions Per Day' },];
     this._variableLayoutDocumentServiceProxy.extractionsPerDays().subscribe((result: ListResultDtoOfDocExtDto) => {
                if (result) {
                    for (let i = 0; i < result.items.length; i++) {

                    this.lineChartData[0].data.push(result.items[i].extractionsPerDay);

                    this.lineChartLabels.push(result.items[i].creationTime.date().toString());
                }
            } 

请让我知道如何设置x轴上的标签范围,使其仅显示最近30天的数据?我在下面添加一个图像的链接,这是提供给我的线框供参考。 https://i.stack.imgur.com/53erb.png

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)