Я разрабатываю приложение с некоторым линейным графиком. Я использую линейный график в библиотеке "ngx-chart". Это работает, но я хотел бы иметь лучшее отображение оси. Мои данные являются значениями температуры в соответствии с датой. На самом деле, график отображает метку для каждого значения. Если у меня есть 100 значений, у меня есть 100 меток тиков. Поэтому я хотел бы ограничить количество тиков.
Я использую график Angular и NGX. Я видел в документах параметр "xAxisTicks", но, похоже, это не самый лучший способ
component.html:
<ngx-charts-line-chart
[legendTitle]="legendTitle"
[xAxisTickFormatting]="xAxisTickFormatting"
[view]=""
[scheme]="colorScheme"
[results]="temperatures"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale"
(select)="onSelect($event)">
</ngx-charts-line-chart>
component.ts
legendTitle = "Température actuelle";
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Heure';
showYAxisLabel = true;
yAxisLabel = 'Température';
// xAxisTicks = [
// new Date("2019-10-06 10:00:00"),
// new Date("2019-10-06 10:30:00"),
// new Date("2019-10-06 11:00:00"),
// new Date("2019-10-06 11:30:00"),
// new Date("2019-10-06 12:00:00"),
// ]
colorScheme = {domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] };
autoScale = true;
данные:
multi = [
{
"name": "Exterieur",
"series": [
{
"name": new Date("2019-10-09 10:00:00"),
"value": 15
},
{
"name": new Date("2019-10-11 10:10:00"),
"value": 17
}
]
}]
Фактический результат:
Я хотел бы иметь это:
Меньше ярлыков, но сохраняются вседанные.
Возможно ли это с диаграммой ngx?
Спасибо, Томас