javascript X轴(按月)，以充值为单位

sr4lhrrt 于 2023-04-19 发布在 Java

关注(0)|答案(2)|浏览(93)

我希望X轴只显示月份，我可以在一个月内的不同日期添加内容。
我尝试使用ticks，但它只是删除了X Axys我使用ticksFormatter，但当同一个月有不同的一天时，它会重复X Axys标题，并显示“June JulyAugust AugustSeptember October Novemeber”，我想要的是它只是“June July August September October Novemeber”
就像这样：
Example

<ResponsiveContainer width="95%" height={360}>
<LineChart data={data.data}>
<CartesianGrid strokeDasharray="1 5" stroke="#2A2A2C" vertical={false} />
<XAxis dataKey="name" axisLine={false} tickLine={false} tickFormatter={date => moment(date, "YYYY-MM-DD HH:mm:ss").format("MMMM")}/>
<YAxis axisLine={false} tickLine={false} tick={{ stroke: '#000', strokeWidth: 1 }} tickMargin="10" />
<Tooltip labelFormatter={date => moment(date, "YYYY-MM-DD HH:mm:ss").format("DD-MM-YYYY")} />
<Legend verticalAlign="top" align="right" height={36} iconType="circle" formatter={text => <span style={{ color: "#000" }}>{text}</span>} />
{data.ref.map((entry, index) => (
<Line type="linear" dataKey={entry.name} strokeWidth={5} stroke={entry.color} dot={{ strokeWidth: 4, r: 5 }} />))}
</LineChart>
</ResponsiveContainer>

这是我的JSON

"lineChart": {
        "title": "Pedidos (× R$ 1M)",
        "ref": [{
                "name": "Aprovados",
                "color": "#BF2542"
            },
            {
                "name": "Incluídos",
                "color": "#7DA43D"
            }
        ],
        "data": [{
                "name": "2021-06-20 00:20:16",
                "Aprovados": 31,
                "Incluídos": 23
            },
            {
                "name": "2021-07-20 00:20:16",
                "Aprovados": 41,
                "Incluídos": 13
            },
            {
                "name": "2021-08-20 00:20:16",
                "Aprovados": 21,
                "Incluídos": 43
            },
            {
                "name": "2021-08-22 00:20:16",
                "Aprovados": 23,
                "Incluídos": 23
            },
            {
                "name": "2021-09-20 00:20:16",
                "Aprovados": 71,
                "Incluídos": 63
            },
            {
                "name": "2021-10-20 00:20:16",
                "Aprovados": 21,
                "Incluídos": 43
            },
            {
                "name": "2021-11-20 00:20:16",
                "Aprovados": 41,
                "Incluídos": 13
            }
        ]
    }

JavaScript

来源：https://stackoverflow.com/questions/70349109/x-axis-by-month-in-recharts

2条答案

按热度按时间

30byixjq1#

如果你保存已经在state中使用的月份，然后使用一个回调函数来检查月份是否已经在x轴上，这将阻止值重复。

const [xValues, setXValues] = useState([])

const formatDate = (date) => {
    if (xValues.includes(date.getMonth())) {
        setXValues([...xValues, date.getMonth()])
        return moment(date, "YYYY-MM-DD HH:mm:ss").format("MMMM")
    } return ''
}

<XAxis dataKey="name" axisLine={false} tickLine={false} tickFormatter={date => formatDate(new Date(date))}/>

赞(0）回复(0）举报 2023-04-19

8fq7wneg2#

const formatMonth = (date) => {
    return new Date(date).toLocaleString("default", { month: "short" });
  };

  const final_data = [];
  let prevMonth = "";

  data.forEach((item, index) => {
    const currentMonth = formatMonth(item.month);
    if (currentMonth !== prevMonth) {
      final_data.push({
        ...item,
        show: currentMonth,
      });
      prevMonth = currentMonth;
    } else {
      final_data.push({
        ...item,
        show: "",
      });
    }
  });
<XAxis dataKey="show" tick={customTick} tickLine={false} />

赞(0）回复(0）举报 2023-04-19

我来回答

javascript X轴(按月)，以充值为单位

2条答案

相关问题

热门标签

最新问答