Отформатированная дата дата на оси х - PullRequest
Новая
       27

Отформатированная дата дата на оси х

0 голосов
/ 19 ноября 2018

Я пытаюсь отобразить линейный график на основе этого набора данных: 

[
  { x: new Date(2018, 1, 1), y: 0 },
  { x: new Date(2018, 2, 1), y: 50 },
  { x: new Date(2018, 3, 1), y: 150 },
  { x: new Date(2018, 4, 1), y: 200 },
  { x: new Date(2018, 5, 1), y: 340 },
  { x: new Date(2018, 6, 1), y: 490 },
  { x: new Date(2018, 7, 1), y: 590 },
  { x: new Date(2018, 8, 1), y: 700 },
  { x: new Date(2018, 9, 1), y: 1230 },
  { x: new Date(2018, 10, 1), y: 900 },
]

Моя проблема: метки оси x дублируются 4 раза, поэтому каждый тик отображается 4 раза: feb, feb, feb, feb, mar, mar, mar, mar ...

ОБНОВЛЕНИЕ:

Удаление форматирования даты показывает, что «react-vis» отображает галочку каждую неделю (4 февраля, 11 февраля, февраль18, 25 февраля, 4 марта, 11 марта ...) Но данные имеют месячный интервал.

Как я могу заставить ось х следовать данным?

Это мой код: 

<FlexibleWidthXYPlot height={300} xType="time">
  <XAxis
    // tslint:disable-next-line jsx-no-lambda
    tickFormat={(d: Date) => formatDate(d, { rawFormat: 'MMM' })}
    tickLabelAngle={-45}
    // xDomain={[new Date(data[0].x), new Date(data[data.length - 1].x)]}
    // xRange={[0, 9]}
    // tickValues={[0, 9]}
  />
  <YAxis />
  <HorizontalGridLines />
  <AreaSeries
    data={data}
    opacity={0.25}
    fill="#556887"
    stroke="#556887"
    // tslint:disable-next-line jsx-no-lambda
    onNearestXY={(value: any) => {
      this.setState({ tooltipValue: value })
    }}
    curve={curveName}
  />
  <LineMarkSeries data={data} stroke="#556887" fill="#556887" strokeWidth={3} size={3} curve={curveName} />
</FlexibleWidthXYPlot>

Я пробовал обе настройкиRange, Domain и tickValues ​​на xAxis, но, похоже, ничего не работает ...

Как сделать так, чтобы метки на оси X отображались только один раз?

ОБНОВЛЕНИЕ 2:

Я могу ограничить количество тиков, установив атрибут totalTicks={data.length} следующим образом: 

<XAxis
  // tslint:disable-next-line jsx-no-lambda
  tickFormat={(d: Date) => formatDate(d, { rawFormat: 'MMM' })}
  tickLabelAngle={-45}
  totalTicks={data.length}
  ...
  />

Интересно, есть ли более элегантный / "правильный" способ управления интерваламиотметки оси х ... ??

...