Угловая диаграмма NGX: настройка числа тиков X - PullRequest
0 голосов
/ 06 октября 2019

Я разрабатываю приложение с некоторым линейным графиком. Я использую линейный график в библиотеке "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
     }
   ]
 }]

Фактический результат: exemple

Я хотел бы иметь это:

expected

Меньше ярлыков, но сохраняются вседанные.

Возможно ли это с диаграммой ngx?

Спасибо, Томас

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...