Open zhangwei900808 opened 3 years ago
好像跟rectSize有关,我设置成14之后结束时间没显示全,设置成12就好了,不过开始时间还是不对
rectSize={12}
还有个问题,设置space=4的时候图例显示遮挡了
space={4}
要不你告诉我在哪个分支和代码上面改我来提pr给你吧
@zhangwei900808 你可以把你的示例通过 codesandbox.io 重现。我有空看看。
开始时间是因为跟左边 星期
和月份
对其,所以补了几天,你可以使用 rectRender
,过滤不显示。
不清楚你怎么写的,为什么有遮挡。最好提供你的示例我看看。
这里有示例参考:https://codesandbox.io/s/react-heat-map-example-forked-60-kggm8?file=/src/index.js:0-762
import ReactDOM from "react-dom";
import HeatMap from "@uiw/react-heat-map";
const value = [
{ date: "2016/01/11", count: 2 },
{ date: "2016/01/12", count: 20 },
{ date: "2016/01/13", count: 10 },
...[...Array(17)].map((_, idx) => ({
date: `2016/02/${idx + 10}`,
count: idx,
content: ""
})),
{ date: "2016/04/11", count: 2 },
{ date: "2016/05/01", count: 5 },
{ date: "2016/05/02", count: 5 },
{ date: "2016/05/04", count: 11 }
];
const Demo = () => {
return (
<div>
<HeatMap
value={value}
height={320}
rectSize={21}
startDate={new Date("2016/01/01")}
endDate={new Date("2016/01/25")}
/>
</div>
);
};
ReactDOM.render(<Demo />, document.getElementById("container"));
如果你要最快解决问题,可以 PR, 分支只有一个 main
默认分支。
@jaywcjlove 我把遇到的问题列举一下吧,感觉问题还不少
我刚在本地设置space={4}就遮挡了,
还有weekLables和monthLables拼写错误,应该是monthLabels和monthLabels
还有weekLables和monthLables拼写错误,应该是monthLabels和monthLabels
这个没有明白什么意思 @zhangwei900808
@jaywcjlove 标签是使用Label而不是Lable,
我来改下吧
还有, const [selectaDate, setSelectaDate] = useState();
,selectaDate应该是selectDate吧,我也改了吧
@jaywcjlove 我刚提了一个PR了,我接着往下改吧
@zhangwei900808 .idea
在 .gitignore
中忽略掉吧。
@jaywcjlove 好的
@jaywcjlove 你的代码没有注释,我改的好痛苦啊,一直读码中,
@zhangwei900808 这个就是生成 svg,太简单,没有必要注释吧。
你当然简单,是你的思路啊,我要先了解你生成的逻辑,还要改代码,没有注释,无法了解当时你的想法,容易出错
@jaywcjlove 比如这里,我打印出月份只有10个,可是你显示不止这么多,我都不知道剩下的数据哪来的
我改我能改的吧,不能改的你来吧
@zhangwei900808
月份不能自动控制,你可以设置 svg 宽度
通过设置宽度,计算有显示多少列(月份) @zhangwei900808 所以你可以设置宽度。这个目的是减少代码,之前封装了一个 heat-map 组件就是太复杂,重新搞了一下
@jaywcjlove 我看错了,你demo上面有7个实例,我改的是第1个,打印的是最后一个,我知道怎么改了
我设置下面时间段,可是显示的时候却显示了2019年的数据,以及开始时间和结束时间完全不正确。