Как использовать строку даты UT C в качестве оси перезарядки и равномерно распределить ее - PullRequest
Новая
       3

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

0 голосов
/ 03 апреля 2020

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

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 исчез вместе со строкой данных. Есть ли способ «заполнить» эти пробелы в датах?

A коды и поле

1 Ответ

0 голосов
/ 10 апреля 2020

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

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

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

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

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

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

...