如何使用 Chart Js 查找每年的项目总和

IT技术 javascript reactjs graph charts chart.js
2021-05-07 09:22:15

想象一下我有一个这样的数组：

["2012", "2016", "2011", "2017", "2017", "2012", "2014", "2019", "2019", "2014", "2012", "2016", "2012", 2015, "2013", "2012", "2011", "2008", 2015, "2009", "2011", "2018", "2019", "2017", 2015, "2020", "2016", "2010", "2013", "2017", "2018", "2014", "2014", "2019", "2015", "2019", "2016", "2014", "2015", "2015", "2019", "2009", "2016", "2014", "2015", "2015", "2015", "2016", "2012", "2013"]

我怎样才能使用 Chart js & React.js 绘制此图，其中 x 轴包含单个年份，y 轴包含找到年份的出现次数？

这是我尝试过的：

let array = [["2012", "2016", "2011", "2017", "2017", "2012", "2014", "2019", "2019", "2014", "2012", "2016", "2012", 2015, "2013", "2012", "2011", "2008", 2015, "2009", "2011", "2018", "2019", "2017", 2015, "2020", "2016", "2010", "2013", "2017", "2018", "2014", "2014", "2019", "2015", "2019", "2016", "2014", "2015", "2015", "2019", "2009", "2016", "2014", "2015", "2015", "2015", "2016", "2012", "2013"];

getChartData = () => {
  console.log(array);
  this.setState({
    chartData: {
      labels: array,
      datasets: [{
        label: 'Population',
        data: array,
      }]
    }
  });
};
1个回答

要获得 y 轴数组，您可以将reduce与 ES6 Map结合使用。Map 的思想类似于常规对象，它存储键值对。每个键必须是唯一的。您可以.reduce()通过将键设置为数组中的年份来累积/形成您的地图。如果年份已经在地图中，您可以增加它的值，该值将保留该年份出现的次数。如果该年份不在地图中，您可以将其添加为值为 1 的新键（表示该年份已遇到一次）。然后，您可以从地图中获取键并使用Array.from()获得一系列独特的年份。您还可以从地图中获取值并将其转换为数组以获取频率数组。xAxis 数组中的每个索引对应于相同索引处的频率（例如：xAxisArr[0] 保存“2012”，因此其频率将为 yAxisArr[0]（相同索引），即 6）。

const arr = ["2012", "2016", "2011", "2017", "2017", "2012", "2014", "2019", "2019", "2014", "2012", "2016", "2012", "2015", "2013", "2012", "2011", "2008", "2015", "2009", "2011", "2018", "2019", "2017", "2015", "2020", "2016", "2010", "2013", "2017", "2018", "2014", "2014", "2019", "2015", "2019", "2016", "2014", "2015", "2015", "2019", "2009", "2016", "2014", "2015", "2015", "2015", "2016", "2012", "2013"];

const freqMap = arr.reduce(
  (map, year) => map.set(year, (map.get(year) || 0) + 1),
  new Map
);
const xAxisArr = Array.from(freqMap.keys()); // array of unique years
const yAxisArr = Array.from(freqMap.values()); // array of frequencies for each year

console.log("x axis");
console.log(xAxisArr);
console.log("y axis");
console.log(yAxisArr);

注意：我假设您提供的数组中的文字数字2015（而不是“2015”作为字符串）是拼写错误，因此我已在上面的示例中转换了它们。如果它们不是拼写错误，您可以使用 .map 将数组映射到字符串.map(String)。

其它你可能感兴趣的问题
上一篇如何在react中为表行提供唯一 ID 下一篇如何使用箭头键遍历 <span> s