因此,我有一个带有Piechart的前端,希望显示我的客户中年龄的百分比(一个数据库表).我已经存储了每个客户的年龄,所以我有一个这样的array.

enter image description here

const ages = [12,42,23,42,12,65,75,12,43,54,12,53,24,23,54,64,76,12,42];

考虑到这些值,我想最终得到这样的东西

const data = {
    labels: ['12-20', '21-40', '41-60', '61-76']
    dataSet: [4, 6, 2, 5] // This is the amount of ages between each range. The sum of these must be equivalent of the length of the array 
}

这就是我到目前为止所try 的

const ages = [12, 42, 53, 12, 32, 12, 52, 66, 76, 87, 23, 12, 43, 12, 43, 54, 65].sort((a, b) => a - b);
const minAge = Math.min(...ages);
const maxAge = Math.max(...ages);
const q1 = ages[Math.floor(ages.length / 4)];
const q2 = ages[Math.floor(ages.length / 2)];
const q3 = ages[Math.floor(ages.length * 3 / 4)];
let firstRangeCount = 0;
let secondRangeCount = 0;
let thirdRangeCount = 0;
let fourthRangeCount = 0;
for (const age of ages) {
    if (age) {
        if (age <= q1) {
            firstRangeCount++;
        } else if (age <= q2) {
            secondRangeCount++;
        } else if (age <= q3) {
            thirdRangeCount++;
        } else {
            fourthRangeCount++;
        }
    }
}
const data = {
    labels: [
        `${minAge} - ${q1}`,
        `${q1} - ${q2}`,
        `${q2} - ${q3}`,
        `${q3} - ${maxAge}`,
    ],
    datasets: {
        label: 'Ages',
        data: [firstRangeCount, secondRangeCount, thirdRangeCount, fourthRangeCount],
    }
}

但是这个解决方案的问题是它不是动态的.如果ages数组包含较少的数据,则不适用4个范围.

我怎样才能使这个范围"动态"?.我读过一些关于四分位范围的文章,但对我帮助不大

推荐答案

试试这个(下面的代码段中添加了描述性注释):

// Input array
const ages = [12,42,23,42,12,65,75,12,43,54,12,53,24,23,54,64,76,12,42];

// data object with range array
const data = {
  labels: ['12-20', '21-40', '41-60', '61-76'],
  dataSet: []
}

// declare a variable which will contain the count of occurance based on the range
const obj = {};

// logic to find out the counts and pushed into an range array in an object.
data.labels.forEach(label => {
  const splittedLabel = label.split('-')
  const filteredAges = ages.filter(e => e >= splittedLabel[0] && e <= splittedLabel[1]);
  obj[label] = [];
  obj[label].push(...filteredAges);
});

// getting the length 
const dataSet = Object.values(obj).map(arr => arr.length);

data.dataSet = dataSet;

// Result
console.log(data);

Javascript相关问答推荐

成帧器运动中的运动组件为何以收件箱开始?

Vega中的模运算符

提交表格后保留Web表格中的收件箱值?

在我的html表单中的用户输入没有被传送到我的google表单中

手机上的渲染错误文本必须在文本组件中渲染,但在浏览器上没有问题<><>

如何在JavaScript文件中使用Json文件

Chart.js-显示值应该在其中的引用区域

在我的index.html页面上找不到我的Java脚本条形图

使用getBorbingClientRect()更改绝对元素位置

未加载css colored颜色 ,无法将div设置为可见和不可见

Vaadin定制组件-保持对javascrip变量的访问

令牌JWT未过期

JavaScript -复制到剪贴板在Windows计算机上无效

如果我的列有条件,我如何呈现图标?

如何在Reaction中清除输入字段

由于http.get,*ngIf的延迟很大

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

Js问题:有没有办法将数据从标记表转换成图表?

Node.js的Fetch()调用总是创建新的Express会话

如何在不获取其子元素的文本内容的情况下获取元素的文本内容?