установить день и месяц на оси x пересчета - PullRequest
Новая
       11

установить день и месяц на оси x пересчета

0 голосов
/ 17 июня 2020

Итак, у меня есть эти данные: 

const pulseAverage:[
    {
          name:'Pulse Average',
          style:'#5FE3A1',
          category:'Pulse Average',
          id:'right',
          data: [
            { day: '23/05/2020 04:50', value: 80 },
            { day: '24/05/2020 04:50', value: 83 },
            { day: '25/05/2020 04:50', value: 65 },
            { day: '26/05/2020 04:50', value: 72 },
            { day: '27/05/2020 04:50', value: 79 },
            { day: '28/05/2020 04:50', value: 93 },
            { day: '29/05/2020 04:50', value: 96 },
            { day: '30/05/2020 04:50', value: 91 },
            { day: '31/05/2020 04:50', value: 46 },
          ]
        }

Я успешно создал гистограмму, используя ее, и она отлично выглядит. однако я просмотрел различные вопросы о переполнении стека, проблемы с github для решения, и я все еще ничего не могу найти и извините, если вы видели этот вопрос раньше, но я действительно отчаянно нуждаюсь в помощи. Моя проблема в том, что мне нужно, чтобы xaxis отображал только день / месяц, как это, и игнорировал остальную информацию. мне нужны перезарядки, чтобы понять на его оси x, что мне нужно отображать только эти два (например: 29/05 30/05 31/05 ...)

код: 

<BarChart
        width={1000}
        height={300}
        data={pulseAverage}
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="5 0" tickSize={15} />
        <XAxis 
        dataKey="day"  type="category"  tickLine={false} 
        axisLine={false}  dx={-15} allowDuplicatedCategory={false}
        />
        <YAxis yAxisId="left" orientation="left" dataKey="value" type="number" tickLine={false} axisLine={false} allowDuplicatedCategory={false}/>
        <YAxis yAxisId="right" orientation="right" dataKey="value" type="number" tickLine={false} axisLine={false} allowDuplicatedCategory={false}/>
        <Tooltip />
        <Legend 
        layout="horizontal" verticalAlign="top" align="center" 
        payload={
            pulseAverage.map(
            item => ({
              type: "circle",
              id: item.name,
              color: item.style,
              value: `${item.category}`
            })
          )
        }/>
        {pulseAverage.map(s => (
          <Bar yAxisId={s.id} barSize={10} dataKey="value" data={s.data} key={s.name} name={s.name} fill={s.style}/>          
       ))}
      </BarChart>

1 Ответ

0 голосов
/ 17 июня 2020

Вы можете создать функцию, чтобы разделить дату и переформатировать ее в соответствии с вашими потребностями. 

function formatDate(date) {
    let dateTimeSplitted = date.split(' ')[0]   // Output: 23/05/2020
    let dateSplitted = dateTimeSplitted.split('/') // Output: ['23','05','2020']
    return dateSplitted[0]+ '/' + dateSplitted[1]  // Returns 23/05
}
...