如何使ngx-line-chart响应？

我正在使用ngx-admin，并且正在尝试使ngx-line-chart响应。

我的图表在nb卡中，当我调整窗口大小时，nb卡完全响应。因此，我希望调整图表大小以适合nb卡。

我的html代码：

    
        XXXXXXXXXX
            
                
            
    

我的组件：

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

@Component({
    selector: 'ngx-line-chart',
    template: `
    
    
  `,
})
export class LineChartComponent {
    showXAxis = true;
    showYAxis = true;
    showXAxisLabel = true;
    xAxisLabel = 'Date';
    showYAxisLabel = true;
    yAxisLabel = 'Services effectués';
    colorScheme = {
        domain: ['blue'],
    };
    themeSubscription: any;
    multi = [
        {
            name: 'Services effectués',
            series: [
                {
                    name: '01/01/2019',
                    value: 156,
                },
                {
                    name: '02/01/2019',
                    value: 134,
                },
                {
                    name: '03/01/2019',
                    value: 140,
                },
                {
                    name: '04/01/2019',
                    value: 167,
                },
                {
                    name: '05/01/2019',
                    value: 158,
                },
                {
                    name: '06/01/2019',
                    value: 178,
                },
                {
                    name: '07/01/2019',
                    value: 310,
                },
            ],
        },
    ];

    constructor() {
    }
}

我已经尝试获取屏幕大小以随屏幕大小更改图表大小，但是响应速度并不理想。要更改图表的大小，我可以使用变量view = [x，y]。我在ngx-line-chart文档中读到，如果未定义大小，则图表适合他的容器，但对我而言，它不起作用。

谢谢您的帮助 ！

经过研究，我找到了解决问题的方法。

1）要在调整窗口大小时更改图表大小：

为了更改图表的大小，我使用了“ onResize（event）”方法。该方法接受参数窗口调整大小事件。在这种方法中，我仅获得窗口的宽度，将其除以一个比率（在我的情况下为1.35），然后将其分配给图表的宽度。

onResize（event）方法：

// view is the variable used to change the chart size (Ex: view = [width, height])

onResize(event) {
    this.view = [event.target.innerWidth / 1.35, 400];
}

我的html模板：

2）要在其他设备上更改图表大小：

要在其他设备上更改图表的大小，我必须在构造函数中定义图表的大小。我得到窗口大小，并且像“窗口调整大小”一样，我将其除以一个比率，然后将其分配给“视图”。

我的构造函数：

constructor() {
    this.view = [innerWidth / 1.3, 400];
}

这个答案对我有用。希望对您有帮助。