自定义 dataKey 值

如何解决自定义 dataKey 值

我刚刚开始使用 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”。

我已经尝试了以下两件事：

1. 我已将此函数添加到渲染方法中，以计算日期并将其设置为 dataKey 值。

  let datakeyvalue = (x) => {
     let value = x.day;
     value = value.getDate();
     value = value.toString();
     return value;
  };

2. 我已将此方法添加到组件中，以格式化刻度线。

 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
        });
      }