从一维数组（日期）渲染 React 条形图

Question

我从 api 中获取一组日期，例如：

[‘Apr 14th, 2022’, ‘Apr 14th, 2022’, ‘Apr 12th, 2022’, ‘Apr 12th, 2022’, ‘Apr 11th, 2022’]

注意其中有多个相同的日期。所以每个日期都是一个“activity”，我想做的是显示过去 14 天的活动条形图。我可以通过“新日期”获取当前日期。如果数组有 3 个相同的日期，则发生了 3 个活动，该日期的条形图应该在条形图上有 3 个方框。

我似乎找不到包含一维日期数组的条形图，我该怎么做呢？我目前尝试的是将日期数组按天分组为数组数组，例如：[ [14, 14], [12, 12], [11]] 使用它我可以使用 map 函数遍历数组的每个索引以根据数组的长度渲染框。这变得非常丑陋非常快，所以寻找一个小图书馆，我可以简单地给它日期数组并显示条形图。感谢任何帮助。

Answer 1

编辑：

所以在进一步挖掘之后，我相信我找到了解决您问题的最小方法。我相信很难找到一个库来处理您的确切情况，最好的方法是尝试格式化您的数据以适应例外参数。这是我相信会做到这一点的代码片段。我使用包 moment.js 因为它被广泛使用。 https://momentjs.com/docs/

这是代码片段

const fourteenDaysAgo = moment().subtract(14, 'days')

let barChartArray = new Array(14).fill(0);

console.log(barChartArray)

dates.forEach((date) => {
    const dateAsMoment = moment(date, 'MMM Do, YYYY')
    const DateIsInFourteenDayRange = moment(dateAsMoment).isAfter(fourteenDaysAgo, 'day')

    if(DateIsInFourteenDayRange) {
      //initalizes a new moment that start at the beginning of the day
      //checks the differences in days between now and that date
      //uses that difference to populat the barChartArray

      const index = moment().startOf('day').diff(dateAsMoment, 'days')
      barChartArray[index]++
    }
})

console.log(barChartArray)

我创建了一个 jsfiddle，您可以在这里试用：https://jsfiddle.net/h2809Ljy/208/

这里有一些 console.log 随机数据的语句。

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[4, 3, 2, 2, 1, 1, 5, 7, 4, 2, 1, 1, 3, 1]

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[2, 3, 1, 4, 4, 6, 4, 5, 8, 3, 6, 6, 2, 3]

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[2, 2, 4, 6, 6, 5, 5, 5, 1, 5, 5, 5, 2, 2]

我相信这可以满足您的需求，并且可以在显示数据的方式上提供很大的灵活性。如果您对这段代码或如何开始显示它还有任何疑问，请告诉我，我们很乐意为您解答！

原文：

我建议您查看 d3！它可以是一个强大的库，用于在 React 中显示数据，但做一些简单的事情（例如条形图）是一个相对容易的过程。 d3

d3: https://www.npmjs.com/package/d3

简单条形图教程： https://observablehq.com/@d3/lets-make-a-bar-chart https://blog.logrocket.com/data-visualization-in-react-using-react-d3-c35835af16d0/

最初将 d3 与 react 结合使用可能会造成混淆的一件事是它们都有自己的元素管理过程，因此您在编写代码时必须认真对待这一点（对于一些简单的事情，它可能不会影响任何事物）。我建议阅读这篇文章以了解其中发生了什么（特别是最后几段）。 https://medium.com/noteableio/interactive-applications-with-react-d3-f76f7b3ebc71 https://betterprogramming.pub/5-steps-to-render-d3-js-with-react-functional-components-fcce6cec1411

从一维数组（日期）渲染 React 条形图

Render React bar chart from one-dimensional array (dates)

javascript

charts

reactjs