Question

我正在使用Swimlane的Ngx图表构建应用程序以进行图形数据表示，但是当我通过刷新按钮更新数据时，我会出现奇怪的行为，该按钮会重新调用GET函数更新数据数组。我使用@ angular / flex-layout作为＆＃34; tile-like＆＃34;查看，但即使没有使用它，我仍然遇到这个问题 - 它只是增长了父容器。我不想在[view]属性中使用硬编码的px值，因为我希望它可以使用任何大小的图形/磁贴。

我使用了一个非常基本的垂直条形图：

<div>
    <div>
        <ngx-charts-bar-vertical [results]="dataArray"
                                 [legend]="true"
                                 [xAxis]="true"
                                 [yAxis]="true"
                                 [xAxisLabel]="'Date'"
                                 [yAxisLabel]="'# tickets Raised'"
                                 [showXAxisLabel]="true"
                                 [showYAxisLabel]="true"></ngx-charts-bar-vertical>
    </div>
    <div>
        <!-- Got a table here -->
    </div>
</div>

要更新我的dataArray我正在做的事情：

export class DashboardComponent implements AfterViewInit {
    constructor(private httpClient: HttpClient, private datePipe: DatePipe, private dataService: DataService) { }

    dataArray: any[] = [];

    getData(): void {

        this.dataService.getSomeData<any[]>().subscribe(d => {
                this.dataArray = d;
        });
    }

    // Init
    ngAfterViewInit(): void {
        this.getData();
    }
}

在初始加载时，它很好并将填充容器（它可以在哪里）但是当我点击刷新按钮时，这是我得到的行为：

感谢您的时间。

Answer 1

我们使用图表周围的div解决了它，并使用CSS添加了40或50vh的高度。

更新后图表的高度不再变化。

Answer 2

以下对我有用：

<div style="max-height: 50vh">
  <ngx-charts-bar-vertical   [results]="dataArray"
                             [legend]="true"
                             [xAxis]="true"
                             [yAxis]="true"
                             [xAxisLabel]="'Date'"
                             [yAxisLabel]="'# tickets Raised'"
                             [showXAxisLabel]="true"
                             [showYAxisLabel]="true"></ngx-charts-bar-vertical>
</div>

这方面的缺点是，您需要定义最大高度。

Answer 3

使用视图

<ngx-charts-bar-vertical [results]="dataArray"
                                 [legend]="true"
                                 [xAxis]="true"
                                 [yAxis]="true"
                                 [xAxisLabel]="'Date'"
                                 [yAxisLabel]="'# tickets Raised'"
                                 [showXAxisLabel]="true"
                                 [showYAxisLabel]="true" [view]="chartSize">
</ngx-charts-bar-vertical>

并在组件中定义chartSize

chartSize = [770, 450];

Answer 4

属性视图将设置大小并停止更改

  <ngx-charts-line-chart
    [results]="sloGraphData"
    [xAxis]="true"
    [yAxis]="true"
    [legend]="true"
    [legendPosition]="'below'"
    [showXAxisLabel]="false"
    [showYAxisLabel]="false"
    [showRefLines]="true"
    [referenceLines]="refLines"
    [xAxisLabel]="'Days required'"
    [yAxisLabel]="'Date'"
    [view]="[360, 300]">
  </ngx-charts-line-chart>

Answer 5

更改检测无法识别您尝试修改的数据。

this.dataArray = d;

请尝试分散数据，以检测更改。它为我工作。

this.dataArray = [...d];

NgxCharts调整数据变化

5 个答案: