HTML/CSS/JS实现性别存活堆叠图表下拉切换指标比值不变问题求助

问题原因 #

代码中存在多处语法错误、逻辑错误，导致下拉切换不会触发数据更新：

• 变量名拼写错误：获取下拉选中值时误用未定义的selection变量，应为已声明的select变量
• 无效冗余代码：声明了不存在的data2变量，且filter方法拼写为fiter，该段筛选逻辑完全错误可直接删除
• 动态属性读取错误：无法通过obj.result读取选中的指标值，需用方括号语法obj[value]读取动态属性
• 性别筛选逻辑颠倒：female=1代表女性，原代码将female=1的样本判定为男性，分组完全错误
• 缺少Plotly依赖：原代码未引入Plotly的JS资源，无法渲染图表
• 页面初始无图表：仅绑定了切换事件，页面加载时不会自动生成默认指标的图表

修复后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>生存状态指标分布图</title>
    <script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
</head>
<body>
    <p> 选择观测指标生成按性别和生存状态划分的患病率图表 </p>
    <label for="outcome"> 选择观测指标: </label>
    <select name="Outcomes" id="outcome">
        <option value="SBP"> 收缩压(SBP) </option>
        <option value="weight"> 体重(weight) </option>
        <option value="ARDS"> 急性呼吸窘迫综合征(ARDS) </option>
        <option value="dyspnea"> 呼吸困难(dyspnea)</option>
        <option value="hypoxemia"> 低氧血症(hypoxemia)</option>
    </select>
    <div id="myDiv"></div>

<script>
const data = [{ "hispanic": 0, "female": 0, "old": 0, "dead": 0, "SBP": 121.487, "weight": 63.4695, "ARDS": 0.0088, "dyspnea": 0.1766, "hypoxemia": 0.0265, "sample": 453 },
{ "hispanic": 1, "female": 0, "old": 0, "dead": 0, "SBP": 121.423, "weight": 63.8618, "ARDS": 0.013, "dyspnea": 0.1591, "hypoxemia": 0.0273, "sample": 3853 },
{ "hispanic": 0, "female": 1, "old": 0, "dead": 0, "SBP": 122.6301, "weight": 74.3693, "ARDS": 0.012, "dyspnea": 0.1687, "hypoxemia": 0.0193, "sample": 415 },
{ "hispanic": 1, "female": 1, "old": 0, "dead": 0, "SBP": 121.3046, "weight": 73.8379, "ARDS": 0.0157, "dyspnea": 0.1568, "hypoxemia": 0.0308, "sample": 3501 },
{ "hispanic": 0, "female": 0, "old": 1, "dead": 0, "SBP": 120.0199, "weight": 75.756, "ARDS": 0.1088, "dyspnea": 0.1497, "hypoxemia": 0.1293, "sample": 147 },
{ "hispanic": 1, "female": 0, "old": 1, "dead": 0, "SBP": 121.0816, "weight": 76.4277, "ARDS": 0.0702, "dyspnea": 0.1758, "hypoxemia": 0.0887, "sample": 1297 },
{ "hispanic": 0, "female": 1, "old": 1, "dead": 0, "SBP": 122.1498, "weight": 90.5307, "ARDS": 0.1128, "dyspnea": 0.1955, "hypoxemia": 0.1128, "sample": 133 },
{ "hispanic": 1, "female": 1, "old": 1, "dead": 0, "SBP": 121.566, "weight": 89.0143, "ARDS": 0.0847, "dyspnea": 0.1437, "hypoxemia": 0.0979, "sample": 1287 },
{ "hispanic": 0, "female": 0, "old": 0, "dead": 1, "SBP": 125.8889, "weight": 81.45, "ARDS": 0, "dyspnea": 0, "hypoxemia": 0, "sample": 2 },
{ "hispanic": 1, "female": 0, "old": 0, "dead": 1, "SBP": 125.0605, "weight": 78.4145, "ARDS": 0.2273, "dyspnea": 0, "hypoxemia": 0.2273, "sample": 22 },
{ "hispanic": 0, "female": 1, "old": 0, "dead": 1, "SBP": 110.8, "weight": 81.265, "ARDS": 0.5, "dyspnea": 0, "hypoxemia": 0.5, "sample": 2 },
{ "hispanic": 1, "female": 1, "old": 0, "dead": 1, "SBP": 120.3677, "weight": 91.3292, "ARDS": 0.3636, "dyspnea": 0, "hypoxemia": 0.3636, "sample": 33 },
{ "hispanic": 0, "female": 0, "old": 1, "dead": 1, "SBP": 116.8989, "weight": 78.9615, "ARDS": 0.2308, "dyspnea": 0, "hypoxemia": 0.2308, "sample": 13 },
{ "hispanic": 1, "female": 0, "old": 1, "dead": 1, "SBP": 124.0749, "weight": 76.1999, "ARDS": 0.2727, "dyspnea": 0, "hypoxemia": 0.2727, "sample": 88 },
{ "hispanic": 0, "female": 1, "old": 1, "dead": 1, "SBP": 121.5481, "weight": 92.5458, "ARDS": 0, "dyspnea": 0, "hypoxemia": 0, "sample": 11 },
{ "hispanic": 1, "female": 1, "old": 1, "dead": 1, "SBP": 122.7266, "weight": 87.6138, "ARDS": 0.283, "dyspnea": 0, "hypoxemia": 0.3019, "sample": 106 }]

window.onload = function () {
    const selectDom = document.getElementById("outcome")
    selectDom.addEventListener("change", myFunction);
    // 页面加载时默认渲染第一个指标的图表
    myFunction()
}

function myFunction() {
    const select = document.getElementById("outcome");
    // 修复变量名错误
    const selectedOutcome = select.options[select.selectedIndex].value;
    const selectedLabel = select.options[select.selectedIndex].text;

    // 修复性别分组逻辑
    const females_dead_data = data.filter(item => item.dead === 1 && item.female === 1);
    const females_alive_data = data.filter(item => item.dead === 0 && item.female === 1);
    const males_dead_data = data.filter(item => item.dead === 1 && item.female === 0);
    const males_alive_data = data.filter(item => item.dead === 0 && item.female === 0);

    let females_dead_outcome = [], females_dead_samp = [];
    let females_alive_outcome = [], females_alive_samp = [];
    let males_dead_outcome = [], males_dead_samp = [];
    let males_alive_outcome = [], males_alive_samp = [];

    // 修复动态属性读取错误
    for (let i = 0; i < 4; i++) {
        females_dead_outcome.push(females_dead_data[i][selectedOutcome]);
        females_dead_samp.push(females_dead_data[i].sample);
        females_alive_outcome.push(females_alive_data[i][selectedOutcome]);
        females_alive_samp.push(females_alive_data[i].sample);

        males_dead_outcome.push(males_dead_data[i][selectedOutcome]);
        males_dead_samp.push(males_dead_data[i].sample);
        males_alive_outcome.push(males_alive_data[i][selectedOutcome]);
        males_alive_samp.push(males_alive_data[i].sample);
    }

    function weightedAve(grp_ave, weight) {
        let total = 0, weightSum = 0;
        for (let i = 0; i < weight.length; i++) {
            total += grp_ave[i] * weight[i];
            weightSum += weight[i];
        }
        return total / weightSum;
    }

    const y1 = weightedAve(males_dead_outcome, males_dead_samp)
    const y2 = weightedAve(males_alive_outcome, males_alive_samp)
    const y3 = weightedAve(females_dead_outcome, females_dead_samp)
    const y4 = weightedAve(females_alive_outcome, females_alive_samp)

    const plot = [{
        x: ['死亡男性', '存活男性', '死亡女性', '存活女性'],
        y: [y1, y2, y3, y4],
        type: 'bar'
    }]
    const layout = {
        title: {
            text: `${selectedLabel} 按性别和生存状态的分布`
        }
    };
    Plotly.newPlot('myDiv', plot, layout)
}
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Abdul Samad