#javascript #angular #chart.js #angular2-template
#javascript #angular #chart.js #angular2-шаблон
Вопрос:
Я создаю chart.js функция в моем веб-приложении angular2. Я хочу, чтобы столбики на гистограмме были красными или зелеными в зависимости от того, выше или ниже определенного порога их значение. На данный момент у меня есть статическое решение, которое выглядит следующим образом:
public barChartLabels: string[] = ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00'];
public barChartType: string = 'bar';
public barChartLegend: boolean = false;
public barChartData: any[] = [
{
data: [85, 81, 80, 81, 56, 73, 70, 5, 0, 0, 65, 70, 83, 90, 85, 86, 84, 80, 87, 88, 82, 74, 71, 80],
label: 'Values'
}
];
private colors = [
{
backgroundColor: [
'rgba(45, 227, 81, 0.2)',
'rgba(45, 227, 81, 0.2)',
'rgba(45, 227, 81, 0.2)',
'rgba(45, 227, 81, 0.2)',
'rgba(45, 227, 81, 0.2)',
'rgba(45, 227, 81, 0.2)'
// Potentially loads more colors
]
}
];
Однако это неаккуратно и кажется излишеством. Мне нужно решение, которое будет поддерживать динамическое обновление моих данных и просто сравнивать значение с пороговым значением и возвращать тот или иной цвет. Это должно быть сделано таким образом, чтобы я мог выполнить привязку к шаблону Angular2. Как я должен это сделать?
Обновить:
Вот html:
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [colors]="colors" [options]="barChartOptions" [legend]="barChartLegend"
[chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
Комментарии:
1. Не могли бы вы добавить html?
2. @FabioAntunes Конечно, пожалуйста, посмотрите правку
Ответ №1:
В вашем html:
...[colors]="getColors()"
В вашем файле .ts:
getColors() {
return [{
backgroundColor: this.barChartData.map(d => d > threshold ? red : green)
}];
}
Комментарии:
1. Спасибо! Действительно отличное решение, но это возвращает только цвет фона для первой строки…
2. Мне пришлось использовать
backgroundColor: this.barChartData[0].data.map(d => d > this.target ? red : green)
3. О, и
>
должно быть<
, но помимо этого — действительно хорошее решение!