如何使我的 ngx-line-chart 响应式？

Posted 2023-02-19

【中文标题】如何使我的 ngx-line-chart 响应式？

【英文标题】：How can I make my ngx-line-chart responsive?

【发布时间】：2019-03-04 07:16:04

【问题描述】：

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

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

我的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 文档中读到，如果未定义尺寸，则图表适合他的容器，但在我的情况下它不起作用。

感谢您的帮助！

【参考方案1】：

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

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模板：

<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) 在不同设备上更改图表大小：

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

我的构造函数：

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

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

【讨论】：

如何修复 ngx 图表栏垂直溢出其父 div...

如何修复 ngx 图表栏垂直溢出其父 div

【参考方案2】：

为此我想出了一个更好、更简单的解决方案：

组件网.html

<div #containerRef class="card-body">
  <ngx-charts-line-chart
    [view]="[containerRef.offsetWidth, 400]"
    [scheme]="colorScheme"
    [legend]="legend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    [timeline]="timeline"
    [results]="_lineChartData"
  >
  </ngx-charts-line-chart>
</div>

使其根据容器的宽度做出响应。

更新

如果你想让它响应容器的高度和宽度：

<div #containerRef class="card-body">
 <ngx-charts-line-chart
   [view]="[containerRef.offsetWidth, containerRef.offsetHeight]"
   [scheme]="colorScheme"
   [legend]="legend"
   [showXAxisLabel]="showXAxisLabel"
   [showYAxisLabel]="showYAxisLabel"
   [xAxis]="xAxis"
   [yAxis]="yAxis"
   [timeline]="timeline"
   [results]="_lineChartData"
 >
 </ngx-charts-line-chart>
</div>

【讨论】：

不幸的是，它不适用于身高。您对此有解决方案吗？

使用 [view]="[containerRef.offsetWidth, containerRef.offsetHeight]" ，这将适用于高度和宽度

@ParthDeveloper 能否将其添加为答案，因为它可以完美运行

对我来说，有一个递归。当我们更新child的大小时，根据组件的不同，parent也会重新调整。

@RafaelPizao 您能否分享代码的实时链接或 stackblitz 链接，以便我们查看并帮助您。

【参考方案3】：

以上两个答案都不适合我。但根据上述逻辑，这对我来说是这样的：

chart-component.html

<div class="card">
  <div #ContainerRef class="card-body">
    <ngx-charts-pie-chart
      (window:resize)="
        resizeChart(ContainerRef.offsetWidth)
      "
      [view]="view"
      [results]="dataDashboard"
      [legend]="showLegend"
      legendPosition=""
      [labels]="showLabels"
      [legendTitle]="''"
      [scheme]="colorScheme"
    >
    </ngx-charts-pie-chart>
  </div>
</div>

chart-component.ts

/* ---- Auto resize chart ---- */
private resizeChart(width: any): void 
  this.view = [width, 320]

因此，根据父div的大小进行缩放