0

我是 apexchart 和 reactjs 的新手，不知道如何根据编号显示系列。特定月份的消息，而不是提供静态数据。我已经浏览了这个链接“ 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;
4

1 回答 1

1

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

我很确定它可以被优化。我想说最好的优化是已经以正确的格式接收数据。

const countEmailsByMonth = data => {
  const dates = data.map(datum =>
    moment(datum.date, ["DD-MM-YYYY"]).format("MMMM")
  );

  // getting our dates from your message json file 
  //and formatting them to display month

  const months = moment.months();
  // getting 12 months arr from moment.js

  const mergedMonths = [...months, ...dates];
  // merging months and dates together

  const sortedMonths = mergedMonths.sort(
    (a, b) => months.indexOf(a) - months.indexOf(b)
  );
  //sorting months
  const chartData = {};
  //counting duplicates
  sortedMonths.map(val => (chartData[val] = chartData[val] + 1 || 0));
  return chartData;
};

这是codesandbox的链接

于 2019-10-05T01:28:23.773 回答