Набор данных для гистограммы неправильно настроен с использованием диаграмм ng2 и ng5-slider в Angular

У меня есть ползунок диапазона и гистограмма. Я пытаюсь изменить цвет гистограммы с помощью ползунка диапазона, я могу успешно изменить цвет гистограммы с помощью ползунка, но данные гистограммы не отображаются должным образом. https://stackblitz.com/edit/angular-ivy-wjpkcr


javascript angular chart.js ng2-charts
person roger king    schedule 04.10.2020    source источник
comment
что вы имеете в виду, когда не показываете должным образом, в вашем примере кода все в порядке   -  person Elmehdi    schedule 04.10.2020
comment
@Elmehdi Гистограмма никогда не показывает длину своего значения. он несколько урезан.   -  person roger king    schedule 04.10.2020

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я обнаружил проблему, но вам придется немного поработать над ней, чтобы она была полностью функциональной.
похоже, что когда вы устанавливаете [datasets]="getBarChartData()", диаграмма пытается отобразить, но застревает в цикле, потому что значение цвет фона внутри getBarChartData() бесконечно меняется, обратите внимание, что у вас есть двусторонняя привязка в вашем слайдере:

<ng5-slider [(value)]='value' [(highValue)]='highValue' [options]='options'>

и вы не можете полагаться на это, чтобы правильно обновить диаграмму.
Я добавил событие valueChange в ползунок и обновлял диаграмму всякий раз, когда значение в ползунке изменяется.

<ng5-slider (valueChange)="logValue($event)" [(value)]='value' [(highValue)]='highValue' [options]='options'>

Я также добавил ngOnInit () для правильной инициализации dataValues
ссылки на демонстрацию: ссылка

person Elmehdi    schedule 04.10.2020