尝试使用图表中的数据显示表格

如何解决尝试使用图表中的数据显示表格

我正在尝试根据所选内容（选择哪个栏）呈现具有两列的表格。每个条形都是一个日期数组。

因此，如果单击最后一个栏，我想要一个月份表，其中包含该月份在该数组中出现的次数。

例如，在最后一个栏中，这是显示在由第 62 行中的函数创建的控制台中的数组：

0: {date: 5,count: 1}
1: {date: 7,count: 15}
2: {date: 7,count: 15}
3: {date: 7,count: 15}
4: {date: 7,count: 15}
5: {date: 7,count: 15}     

等等。

功能：

const table = (data,e ) =>{
    // get array of dates when bar is clicked 
    let newArr= data.datum.dimensions[0].datum.data.results.map((d) => d.Date)
    console.log(newArr)

    // convert into Date object 
    const datesArr = newArr.map(d => ({ date: new Date(d),count : 0}))
    console.log(datesArr)


    // add month array with month as an integer and the the count of months (how many times each month shows up )
    const monthArr = datesArr.map((e) => ({date: e.date.getMonth(),count: 0}))
    monthArr.forEach((e) => e.count = datesArr.filter((d) => d.date.getMonth() === e.date).length)
    console.log(monthArr)
    setMonths(monthArr)
}

我正在使用状态，我只是想使用带有此数组和计数的 JSX 呈现一个表

所以我想要一个表格，其中一列是月份，另一列是计数 - 就像这样：

<tr>
      <th>Year
      <select name="format" id="format"
        onChange={(e) => {
             table()
        }}
      >
          <option value='months'>months</option>
  
      </select>
      </th>
      <th>
        count
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{months}</td>
      <td> // count goes here </td>
    </tr>
    
  </tbody>
</Table> */}

这里是完整沙箱的链接：https://codesandbox.io/s/nice-meitner-o70m1

解决方法

你的逻辑在 table() 中有点混乱，我刚刚重新编写了它，必须易于理解。

除此之外，您只需要一张覆盖 months 州的地图，如下所示：

    <Table striped bordered hover size="sm">
      <thead>
        <tr>
          <th>
            Month
            <select name="format" id="format" onChange={console.log}>
              <option value="months">months</option>
              <option value="year">year</option>
            </select>
          </th>
          <th>count</th>
        </tr>
      </thead>
      <tbody>
        {months.map(({ date,count },index) => (
          <tr key={index}>
            <td>{date}</td>
            <td>{count}</td>
          </tr>
        ))}
      </tbody>
    </Table>

看看我的修改是否更干净，否则你必须在 map 之前过滤你的 monthArr，因为它有重复的值。

https://codesandbox.io/s/summer-lake-g0wki?file=/src/chart.js