如何使用图表 Js 查找每年的项目总和答案

【问题标题】：How to Find the Sum of items Per Year Using Chart Js如何使用图表 Js 查找每年的项目总和
【发布时间】：2020-09-02 07:03:08
【问题描述】：

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

["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,
      }]
    }
  });
};

【问题讨论】：

你可以使用 react-chartjs-2 => npmjs.com/package/react-chartjs-2
@DevsiOdedra 我已经在使用它了
@DevsiOdedra 我已经更新了这个问题，向您展示我的尝试
你能举一个你想要的 y 轴数据的数组示例吗？会不会是类似于[5, 6, ...etc]，因为 2012 年出现了 5 次，2016 年出现了 6 次等等...？
@NickParsons 是的，这就是我想要做的。

标签： javascript reactjs graph charts chart.js

【解决方案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(String) 将数组映射到字符串。

【讨论】：