Как использовать строку даты в формате UTC в качестве оси пересчета и равномерно распределить ее

Мой источник данных выглядит так:

const data = [
    { dataora: "2019-10-20T04:00:00Z", valore: -0.04 },
    { dataora: "2019-10-20T05:00:00Z", valore: -0.03 },
    { dataora: "2019-10-20T06:00:00Z", valore: -0.03 },
    { dataora: "2019-10-20T07:00:00Z", valore: -0.03 },
    { dataora: "2019-10-21T10:00:00Z", valore: -0.04 },
    { dataora: "2019-10-21T23:00:00Z", valore: -0.04 },
    { dataora: "2019-10-22T00:00:00Z", valore: -0.04 }
  ];

Мой recharts компонент выглядит так:

<LineChart width={600} height={300} data={data}>
  <Line type="monotone" dataKey="valore" stroke="black" strokeWidth={2} dot={false} />
  <CartesianGrid stroke="#ccc" />
  <XAxis
    dataKey={'dataora'}
    tickFormatter={dateFormatter}
  />
  <YAxis />
</LineChart>

dateFormatter выглядит так:

const dateFormatter = date => {
  // return moment(date).unix();
  return moment(date).format('DD/MM/YY HH:mm');
};

Обычно у меня есть ввод данных через час, но 2019-10-21 имеет только два значения за весь день, теперь я хотел бы также показать недостающие часы на моем графике. В других записях данных я могу получить другой временной интервал, поэтому я не могу установить интервал тиков вручную .. Мне просто нужно, чтобы поле даты было равномерно распределено на XAxis.

Я попытался изменить tickFormatter, чтобы вернуть дату в секундах эпохи Unix и использовать следующие реквизиты.

scale="time" type="number" domain={[dateFormatter(data[0].dataora), dateFormatter(data[1].dataora)]}

но XAxis исчез вместе с линией данных. Есть ли способ «заполнить» эти пропуски даты?

Codeandbox


reactjs recharts
person leverglowh    schedule 03.04.2020    source источник

Ответы (1)


arrow_upward
5
arrow_downward

[отвечаю здесь себе]

Оказывается, мне пришлось обработать входные данные заранее, так как в recharts нет ничего, что позволяло бы мне научить его как читать мои входные данные. Поэтому я преобразовал свое поле даты в эпоху.

data.forEach(d => {
  d.dataora = moment(d.dataora).valueOf(); // date -> epoch
});

А затем я могу использовать тип поля даты в качестве числа и установить домен и т. Д.

<XAxis 
  dataKey={'dataora'}
  domain={[data[0].dataora, data[data.length - 1].dataora]}
  scale="time"
  type="number"
  tickFormatter={DateFormatter} />

Я не очень доволен этим решением, потому что оно требует, чтобы я действительно обработал все данные перед рендерингом диаграммы. Я еще не пробовал это с данными большого размера (тысячи записей и более), но я не оптимистичен.

person leverglowh    schedule 10.04.2020