Блог

Я пытался отобразить данные с сервера на диаграмме рассеяния по нескольким осям y. Я получаю его отфильтрованным за последние 24 часа, но я изо всех сил пытаюсь отобразить его должным образом, потому что, например, один элемент создается в 23:01, и мне нужно расположить его между отметками 23 и 00 по оси X.

Следующий код является примером за последние 4 часа, потому что на этом датчике у меня все еще нет данных, записанных за последние 24 часа:

Код, который я создал

 <ResponsiveContainer width="100%" height="100%">
    <ScatterChart
        width={500}
        height={400}
        margin={{
            top: 10,
            right: 10,
            bottom: 10,
            left: 20,
        }}
    >
        <CartesianGrid />
        <XAxis
            dataKey='created'
            domain={['auto', 'auto']}
            name='created'
            tickFormatter={(unixTime) => moment(unixTime).format('HH')}
            type='number'
        />
        <YAxis yAxisId="left" type="number" dataKey="humidity" name="humidity" unit="%" stroke="#8884d8" />
        <YAxis
            yAxisId="right"
            type="number"
            dataKey="temperature"
            name="temperature"
            unit="°"
            orientation="right"
            stroke="#82ca9d"
        />
        <Tooltip
            cursor={{ strokeDasharray: '3 3', }}
            formatter={(value: any, name: any, props: any) => {
                if (name === 'created') {
                    return moment(value).format('HH:mm');
                } else {
                    return value;
                }
            }}
        />
        <Scatter yAxisId="left" name="A school" data={data} fill="#8884d8" />
        <Scatter yAxisId="right" name="A school" data={data} fill="#82ca9d" />
    </ScatterChart>
</ResponsiveContainer>
 

Данные поступают в массив объектов:

 [
  {
   created: 1631199180006,
   humidity: 9,
   idStation: 3,
   name: "Sofia"
   status: "active"
   temperature: 27
  }
]
 

Мой вопрос в том, как настроить правильное расположение галочек по оси X. Я прочитал несколько постов и, на мой взгляд, мне следует создать собственные галочки, но я был бы очень признателен, если бы кто-нибудь подал идеи