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

Question

我正在尝试呈现一个 table，它根据所选内容（选择哪个栏）有两列。每个栏都是日期数组。

因此，如果单击最后一个栏，我想要一个 table 月份，以及该月份在该数组中出现的次数。

例如，在最后一个小节中，这是显示在第 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 呈现 table

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

<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> */}

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

Answer 1

你的逻辑有点乱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>

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

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

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

Trying to display table using data from chart

javascript

reactjs

nivo-react