Блог

Я только начал использовать перезарядку и являюсь полным новичком. Мне удалось отобразить диаграмму, настроить некоторые стили, такие как цвет полос и положение легенды, но сейчас я изо всех сил пытаюсь настроить значения данных.

На данный момент диаграмма выглядит следующим образом: 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}
];
 

Установка параметра DataKey в <XAxis> компоненте на «день» работает нормально, но галочки отображают полную строку. Вместо этого я хотел бы отображать только день месяца. Поэтому вместо того, чтобы говорить «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, 0]} />
            <Bar dataKey="calories" fill="#E60000" radius={[3, 3, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
       )
    }

}
 

Не могли бы вы дать мне подсказку относительно того, что я забываю или делаю неправильно?

Кристина, добро пожаловать в 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
        });
      }