Почему я не могу разместить две диаграммы на одной странице Chart.Js и динамически обновлять данные ⇐ Javascript

[Гость]

Я разместил на одной странице две диаграммы (столбчатую и линейную) и динамически изменяю данные. Отображаются обе диаграммы, но обновляется только верхняя. Я не могу понять, почему это происходит. На самом деле в данных или диаграммах нет ничего плохого, если я изменю порядок диаграмм, это все равно. Тот, который находится сверху на странице, обновляется, а второй остается пустым.

Они используют разные наборы данных.

Я использую Angular и Chart.Js с BaseChartDirective из ng2-charts.

Это код.

Импорт

import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } из 'chart.js'; импортировать {BaseChartDirective} из 'ng2-charts'; Линейная диаграмма

public lineChartData: ChartConfiguration['data'] = { наборы данных: [ { данные: this.line_array1, этикетка: «Серия А», Цвет фона: '#FFB1C1', borderColor: '#FFB1C1', pointBackgroundColor: 'rgba(148,159,177,1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(148,159,177,0.8)', }, { данные: this.line_array2, этикетка: «Серия Б», Цвет фона: '#9BD0F5', borderColor: '#9BD0F5', pointBackgroundColor: 'rgba(77,83,96,1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(77,83,96,1)', }, ], метки: this.line_labels }; public lineChartOptions: ChartConfiguration['options'] = { элементы: { линия: { напряжение: 0, }, }, Весы: { // Мы используем эту пустую структуру в качестве заполнителя для динамического оформления тем. й: { позиция: «левая», }, Икс:{ сетка:{ отображение: ложь, } }, у1: { позиция: «правая», сетка: { цвет: 'rgba(255,0,0,0.3)', дисплей: ложь }, тики: { красный цвет', }, }, }, плагины: { легенда: {display: false}, метки данных: { дисплей: ложь }, }, }; общественный lineChartType: ChartType = 'линия'; Строка @ViewChild(BaseChartDirective): BaseChartDirective | неопределенный; общедоступная диаграммаHovered({ событие, активный, }: { событие?: ChartEvent; активен?: объект[]; }): пустота { console.log(событие, активно); } Гистограмма

@ViewChild(BaseChartDirective) панель: BaseChartDirective | неопределенный; public barChartOptions: ChartConfiguration['options'] = { отзывчивый: правда, Весы: { Икс: { сетка: { дисплей: ложь } }, й: { мин: 0, сетка: { дисплей: ложь } }, }, плагины: { легенда: { отображение: ложь, }, метки данных: { дисплей: ложь }, }, }; общественный barChartType: ChartType = 'bar'; общественный barChartPlugins = [DataLabelsPlugin]; общедоступный barChartData: ChartData = { метки: this.bar_labels, наборы данных: [ {данные: this.bar_array1}, { данные: this.bar_array2 }, ], }; HTML такой






Поскольку на странице первой стоит гистограмма, она обновляется динамически. Если бы я изменил и поместил линейную диаграмму вверху, она бы обновлялась.

Дело в том, что если у меня выбрана вкладка Mat-Tab для линейной диаграммы «как я уже сказал, диаграмма не будет динамически обновляться», и я перехожу на другую вкладку, а затем возвращаюсь на вкладку линейной диаграммы, диаграмма затем обновляется.