自定义 dataKey 值答案

【问题标题】：Customize dataKey values自定义 dataKey 值
【发布时间】：2021-09-02 04:31:30
【问题描述】：

我刚开始使用 Recharts，完全是初学者。我已经设法渲染了一个图表，自定义了一些样式，例如条形的颜色和图例的位置，但我现在正在努力自定义 dataKey 值。

目前，图表如下所示：https://i.stack.imgur.com/glBKE.png

我正在尝试根据以下数据呈现条形图：

const data = [
{day: "2020-07-01", kilogram: 80, calories: 240},
{day: "2020-07-02", kilogram: 80, calories: 240},
{day: "2020-07-03", kilogram: 80, calories: 240},
{day: "2020-07-04", kilogram: 80, calories: 240},
{day: "2020-07-05", kilogram: 80, calories: 240}
];

将<XAxis> 组件上的dataKey 设置为“day”可以正常工作，但刻度会显示完整的字符串。相反，我只想显示一个月中的哪一天。所以不应该说“2020-07-01”，而应该只说“1”。

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

我已将此函数添加到 render 方法中，用于计算日期并将其设置为 dataKey 值。

  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, 0]} />
            <Bar dataKey="calories" fill="#E60000" radius={[3, 3, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
       )
    }

}

你能告诉我我忘记了什么或做错了什么吗？

【问题讨论】：

标签： javascript reactjs bar-chart recharts

【解决方案1】：

克里斯汀，欢迎来到 StackOverflow！

对于这种情况真正有帮助的是一个工作示例，例如使用 jsfiddle 或 StackOverflow 的代码 sn-p 工具 :) .

我不是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
        });
      }

【讨论】：