Question

我正在处理一个处理大块数据的项目。在我的Javascript中，我通过Ajax将这些数据作为一个对象数组接收。

此数据的一个示例是：

{ageatdeath: 0, death_count: 4, death_percent: 66.66666666666667}

对于每个年龄段（范围从0到100）我都有一个对象。我想要做的是将这些组合在10年的范围内（例如0-10,11-20），并用图表创建一个饼图。

我能够做到这一点，但我使用了很多几乎重复的代码来实现这一目标。我想知道是否有更好的方法来实现这一目标。

这是我现在使用的函数的代码。

function drawPieChartAgeAtDeath(data) {
var range0_10 = null;
var range11_20 = null;
var range21_30 = null;
var range31_40 = null;
var range41_50 = null;
var range51_60 = null;
var range61_70 = null;
var range71_80 = null;
var range81_90 = null;
var range90plus = null;
for (var i = 0, len = data.length; i < len; i++) {
    if (data[i].ageatdeath >= 0 && data[i].ageatdeath <= 10) {
        range0_10 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 11 && data[i].ageatdeath <= 20) {
        range11_20 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 21 && data[i].ageatdeath <= 30) {
        range21_30 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 31 && data[i].ageatdeath <= 40) {
        range31_40 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 41 && data[i].ageatdeath <= 50) {
        range41_50 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 51 && data[i].ageatdeath <= 60) {
        range51_60 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 61 && data[i].ageatdeath <= 70) {
        range61_70 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 71 && data[i].ageatdeath <= 80) {
        range71_80 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 81 && data[i].ageatdeath <= 90) {
        range81_90 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 91) {
        range90plus += data[i].death_percent;
    }
}

var pie_data = [{
    values: [range0_10,
        range11_20,
        range21_30,
        range31_40,
        range41_50,
        range51_60,
        range61_70,
        range71_80,
        range81_90,
        range90plus],
    labels: ['0-10 year',
        '11-20 year',
        '21-30 year',
        '31-40 year',
        '41-50 year',
        '51-60 year',
        '61-70 year',
        '71-80 year',
        '81-90 year',
        '> 90 year'],
    type: 'pie'
}];

var layout = {
    height: 400,
    width: 500
};

Plotly.newPlot('pieChartDiv', pie_data, layout);

任何帮助都会非常感激！

Answer 1

您可以更加优雅地生成范围：

const ranges = Array.from({ length: 10 }, () => 0);
data.forEach(item => {
  const initRangeIndex = Math.floor((item.ageatdeath - 1) / 10);
  const rangeIndex = initRangeIndex === -1 ? 0 :
                       initRangeIndex > 9 ? 9
                       : initRangeIndex;
  ranges[rangeIndex] += item.death_percent;
});
const pieData = [{
  values: ranges,
  // ...

Answer 2

将年龄除以10，然后将地板分组到您想要的桶中。当分组从0-10到11-20（而不是0-9,10-19）时，你需要偏移1。如果年龄超过100，下面将自动生成大于10的新桶。如果没有年龄范围的数据，则桶可能为空。

function drawPieChartAgeAtDeath(data) {

    var values = [];

    for (var i = 0, len = data.length; i < len; i++) {
        let valueBucket = Math.floor(Math.max(data[i].ageatdeath-1,0)/10);

        values[valueBucket] = values[valueBucket] || 0;
        values[valueBucket] += data[i].death_percent;
    }

    var pie_data = [{
        values: values,
        labels: ['0-10 year',
            '11-20 year',
            '21-30 year',
            '31-40 year',
            '41-50 year',
            '51-60 year',
            '61-70 year',
            '71-80 year',
            '81-90 year',
            '> 90 year'],
        type: 'pie'
    }];

    var layout = {
        height: 400,
        width: 500
    };

    Plotly.newPlot('pieChartDiv', pie_data, layout);
}

从有些重复的代码在Javascript中创建一个函数

2 个答案: