时间戳

首页 > 解决方案 > 使用带有连续线或面积图的图表绘制数据集，平均间隔为 15 分钟 javascript

javascript - 使用带有连续线或面积图的图表绘制数据集，平均间隔为 15 分钟 javascript

问题描述

我正在尝试绘制一个月的数据，看起来像这样，

0: {created: 1601820360, magic: -0.1, magnitude: 0.1, createdDay: "2020-10-05"}
1: {created: 1601820365, magic: -0.8, magnitude: 0.8, createdDay: "2020-10-05"}
2: {created: 1601900938, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"}
3: {created: 1601900956, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"}
4: {created: 1601900971, magic: 0.2, magnitude: 0.2, createdDay: "2020-10-05"}

目前图表看起来像这样， 在此处输入图像描述

这个数组中有 3000 个 ish 数据点，我正在寻找它按时间聚合，比如 15 分钟或小时，而不是单独的时间戳，超过它的日期。

我怎样才能得到这种输出？仅仅是数据本身需要随时间平均吗？

尝试重新格式化传入的数据，使其对图表更有用。我想让数据进入并平均超过 15 分钟的间隔，但对如何实现这一点感到非常困惑。

这是代码的第一部分，它只是获取数据并对其进行适当的排序以获得上面的折线图，

export default function generateLineGraphPointsSentiment(
  sentimentData
) {
  
  if (sentimentData !=null) {
  const DataInput = [];

  Object.keys(sentimentData).map(function (key, item) {
    var sentimentCurrent = sentimentData[key];
    sentimentCurrent.map(function (k, num) {
      let dateCreated = new Date(k.created * 1000);

      DataInput.push({
        created: dateCreated,
        sentiment: k.sentiment,
        magnitude: k.magnitude,
      });
    });

  });

  return DataInput
}
else { return 0 }
}

数据本身的平均有点像这样，但不知道如何让它在多天内工作，

function generateSentimentPoints(Sentiments) {
  let nOfEntries = Array(24).fill(1);
  Sentiments.forEach((item) => {
    
    const createdHour = new Date(item.created * 1000).getHours();
    values[createdHour] = values[createdHour] + item.sentiment;
    nOfEntries[createdHour] += 1;
  });

欣赏实现此结果的更好方法

标签： javascriptreactjsrecharts

解决方案

尝试将您的作品替换为，

    <AreaChart
      width={500}
      height={400}
      data={data}
      margin={{
        top: 10,
        right: 30,
        left: 0,
        bottom: 0
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="createdDay" />
      <YAxis />
      <Tooltip />
      <Area type="monotone" dataKey="magnitude" stroke="#8884d8" fill="#8884d8" />
    </AreaChart>

三个变量需要是正确的，

  • data，你用过Data，不知道是不是笔误
  • "createdDay", x 轴标签
  • “幅度”，y轴标签

推荐阅读