angular - 如何让我的 ngx-line-chart 响应？

Question

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

我的图表在 nb-card 中，当我调整窗口大小时，nb-card 完全响应。所以我想调整我的图表大小以适应 nb-card。

我的 html 代码:

<div style="margin: 100px auto auto">
    <nb-card>
        <nb-card-header>XXXXXXXXXX</nb-card-header>
            <nb-card-body>
                <ngx-line-chart></ngx-line-chart>
            </nb-card-body>
    </nb-card>
</div>

我的组件:

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

@Component({
    selector: 'ngx-line-chart',
    template: `
    <ngx-charts-line-chart
      [scheme]="colorScheme"
      [results]="multi"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel">
    </ngx-charts-line-chart>
  `,
})
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 文档中读到，如果没有定义尺寸，图表适合他的容器，但在我的情况下它不起作用。

感谢您的帮助!

Answer 1

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

1) 在调整窗口大小时更改图表大小:

为了更改图表的大小，我使用了“onResize(event)”方法。此方法接受窗口调整大小事件的参数。在这种方法中，我只需获取窗口的宽度，将其除以一个比率(在我的例子中是 1.35)，然后将其分配给图表的宽度。

onResize(事件)方法:

// 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 模板:

<ngx-charts-line-chart
  (window:resize)="onResize($event)"
  [scheme]="colorScheme"
  [results]="multi"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [view]="view">
</ngx-charts-line-chart>

2) 在不同设备上更改图表大小:

要在不同设备上更改图表的大小，我必须在构造函数中定义图表的大小。我得到窗口大小，喜欢“窗口调整大小”，我将它除以一个比率，然后将它分配给“ View ”。

我的构造函数:

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

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