Question

所以我有这个数据：

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>

Answer 1

您可以创建一个函数来分割日期并根据需要重新格式化。

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
}

在图表xaxis中设置日期和月份日期

1 个答案: