问题描述
我刚刚开始使用 Recharts,完全是初学者。我已经设法渲染了一个图表,自定义了一些样式,例如条形的颜色和图例的位置,但我现在正在努力自定义 dataKey 值。
目前,图表如下所示:https://i.stack.imgur.com/glBKE.png
我正在尝试从以下数据呈现条形图:
const data = [
{day: "2020-07-01",kilogram: 80,calories: 240},{day: "2020-07-02",{day: "2020-07-03",{day: "2020-07-04",{day: "2020-07-05",calories: 240}
];
将 <XAxis>
组件上的 dataKey 设置为“day”工作正常,但刻度显示完整字符串。相反,我只想显示一个月中的哪一天。所以不要说“2020-07-01”,而应该只说“1”。
我已经尝试了以下两件事:
let datakeyvalue = (x) => {
let value = x.day;
value = value.getDate();
value = value.toString();
return value;
};
axisTickFormatter(day) {
const date = new Date(day);
const dataKey = date.getDate();
dataKey.toString();
console.log(typeof dataKey);
return dataKey;
}
=> 你可以在下面的代码中看到两者 - 注释掉
这是我的代码:
class Chart extends React.Component {
constructor(props) {
super(props);
this.type = this.props.type;
this.data = this.props.data;
}
// axisTickFormatter(day) {
// const date = new Date(day);
// const dataKey = date.getDate();
// dataKey.toString();
// console.log(typeof dataKey);
// return dataKey;
// }
render() {
// let datakeyvalue = (x) => {
// let value = x.day;
// value = value.getDate();
// value = value.toString();
// return value;
//};
return (
<ResponsiveContainer>
<BarChart
width={730}
height={250}
data={this.data.sessions}
barCategoryGap={8}
barSize={7}
>
<Cartesiangrid strokeDasharray="2 2" vertical={false} />
<XAxis dataKey="day" />
{/* <XAxis dataKey={(day) => this.axisTickFormatter(day)} /> */}
{/* <XAxis dataKey={datakeyvalue} /> */}
<YAxis />
<Tooltip />
<Legend
iconSize={8}
iconType="circle"
verticalAlign="top"
align="right"
/>
<Bar dataKey="kilogram" fill="#282D30" radius={[3,3,0]} />
<Bar dataKey="calories" fill="#E60000" radius={[3,0]} />
</BarChart>
</ResponsiveContainer>
)
}
}
你能告诉我我忘记了什么或做错了什么吗?
解决方法
Christine,欢迎来到 StackOverflow!
对这种情况真正有用的是一个工作示例,例如使用 jsfiddle 或 StackOverflow 的代码片段工具 :) .
我不是 recharts
的专家,但看起来 XAxis
只需要键,而不是实际值。这反过来意味着,您必须在将数据传递到 BarChart
组件之前对其进行修改。
不过,您已有的方法(读取日期并获取日期)看起来很有效。
也许您可以尝试以下操作:
function formatDate(input) {
return new Date(input).getDate();
// alternatively you can also just use the last two characters from that string with
// return input.slice(-2);
}
class Chart extends React.Component {
constructor(props) {
super(props);
this.type = this.props.type;
// change the date to the desired format,but keep all the others value as they are
this.data = this.props.data.map(d => {
day: formatDate(d.day),kilogram: d.kilogram,calories: d.calories
});
}