从历代重新绘制月XAxis计算图
从历代重新绘制月XAxis计算图
提问于 2020-04-30 12:01:29
我已经成功地从XAxis数据中生成了recharts中的一个月epoch，如下例所示：
const MonthChart = ({ data, domain, ...restProps }) => {
const xFormatter = (seconds) =>
new Date(seconds * 1000).toLocaleDateString("en-US", { month: "short" });
return (
<ResponsiveContainer width="99%" height={400}>
<ComposedChart
data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Legend />
<XAxis
dataKey="epoch"
type="number"
domain={domain}
interval={0}
tickFormatter={xFormatter}
tickCount={12}
/>
<YAxis />
<Area
type="monotone"
dataKey="range"
fill="#b2b2b2 "
stroke="#b2b2b2 "
strokeDasharray="3 3"
/>
<Line
type="monotone"
dataKey="average"
stroke="#000"
strokeDasharray="3 3"
/>
</ComposedChart>
</ResponsiveContainer>
);
};但由于某种原因，“9月”(9月)没有显示，即使数据集有包含本月以来的划时代的记录。
你能发现我的方法出了什么问题吗？
谢谢
这里还有一个码页，它复制了这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-07 09:01:57
我通过将“月份”手动传递给ticks的XAxis支柱来解决这个问题。由于某种原因，tickFormatter没有处理所有的历元。
也许有一个更好的方法，但这一个为我做了诀窍。
提供的代码依赖于问题的将使用该解决方案进行更新。
这也是XAxis的一个小片段
<XAxis
dataKey="epoch"
type="number"
domain={domain}
interval={0}
tickFormatter={xFormatter}
tickCount={12}
ticks={manualTicks}
/>ticks数组：
const manualTicks = [
epochGenerator(new Date(YEAR, 1, 1)),
epochGenerator(new Date(YEAR, 2, 1)),
epochGenerator(new Date(YEAR, 3, 1)),
epochGenerator(new Date(YEAR, 4, 1)),
epochGenerator(new Date(YEAR, 5, 1)),
epochGenerator(new Date(YEAR, 6, 1)),
epochGenerator(new Date(YEAR, 7, 1)),
epochGenerator(new Date(YEAR, 8, 1)),
epochGenerator(new Date(YEAR, 9, 1)),
epochGenerator(new Date(YEAR, 10, 1)),
epochGenerator(new Date(YEAR, 11, 1)),
epochGenerator(new Date(YEAR, 12, 1)),
]和epochGenerator
const epochGenerator = (date) => date.getTime() / 1000;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61522908
复制相关文章
相似问题
腾讯云开发者
