无法从特定事物中检索值

Question

我是apexchart和reactjs的新手，不知道如何根据编号显示series。特定月份的邮件，而不是提供静态数据。我已经通过了链接“ ApexCharts barchart vertical categories logic in ReactJs?”，但无法正确输入逻辑。

这是代码] >>

import React, { Component } from "react";
import Chart from "react-apexcharts";
import { messages } from "../constants/constant";
class Donut extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(res => res.json())
      .then(res => {
        // Setting the response
        // this.props.setMessages(messages);
        // this.props.stareMessages();
        console.log("messages", messages);
        this.setState({
          messages: messages
        });
      });
  }
  state = {
    index: 0,
    flag: false,
    messages: [],
    options: {
      labels: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],

      chart: {
        height: 350,
        type: "bar",
        events: {
          dataPointSelection: (event, chartContext, config) => {
            this.setState({
              labels: chartContext.opts.labels,
              percentage: chartContext.opts.series
            });
            const selectedData = messages.find(
              x => x.id === config.dataPointIndex + 1
            );
            this.setState({ flag: true, selectedData });
          }
        }
      },

      legend: {
        position: "bottom",
        horizontalAlign: "center"
      }
    },
    series: [44, 55, 41, 17, 15, 50, 79, 46, 78, 96, 78, 100]
  };

  render() {
    const { selectedData, options, series } = this.state;
    return (
      <div className="donut">
        <Chart options={options} series={series} type="donut" width="380" />

        {selectedData && (
          <table className="table">
            <thead>
              <tr>
                <th width="200">From</th>
                <th width="200">To</th>
                <th width="200">Date & Time</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{selectedData.from}</td>
                <td>{selectedData.to}</td>
                <td>{selectedData.date}</td>
              </tr>
            </tbody>
          </table>
        )}
      </div>
    );
  }
}

export default Donut;

我是apexchart和reactjs的新手，不知道如何显示基于no的系列。特定月份的邮件，而不是提供静态数据。我已经通过此链接“ ApexCharts ...

Answer 1

您可以使用momentjs解析日期格式。