新手开发者求助：如何实现生日问答APP按分数排序的结果图表展示

嘿，能为儿子的一岁生日亲手做这个家人专属的问答应用，真的太有心啦！作为自学新手遇到这个问题很正常，我来给你一步步拆解解决方案～

1. 先把答题数据结构化存储 #

首先你需要把每个参与者的whatName和currentScore存成一组关联的数据，而不是单独的两个变量。这样后续排序和展示才方便：

如果你用Java/Android开发： #

先定义一个简单的类来封装用户信息：

public class PlayerResult {
    private String name;
    private int score;

    // 构造方法，用来创建用户结果对象
    public PlayerResult(String name, int score) {
        this.name = name;
        this.score = score;
    }

    // 获取姓名和分数的getter方法
    public String getName() { return name; }
    public int getScore() { return score; }
}

然后在每次用户完成答题后，把数据添加到一个列表里：

// 初始化一个列表来存所有结果
List<PlayerResult> allResults = new ArrayList<>();

// 当最后一题完成时，把当前用户的姓名和分数加进去
allResults.add(new PlayerResult(whatName, currentScore));

如果你用Web前端（JavaScript）开发： #

直接用数组存储对象就行，不用额外定义类：

// 初始化数组
const allResults = [];

// 答题完成时添加数据
allResults.push({ name: whatName, score: currentScore });

2. 对结果按分数从高到低排序 #

有了结构化的列表后，排序就很简单了：

Java/Android 排序 #

用Collections.sort配合自定义比较器，一行代码搞定：

// 按分数降序排列（高分在前）
Collections.sort(allResults, (a, b) -> Integer.compare(b.getScore(), a.getScore()));

小补充：如果遇到分数相同的情况，还可以加个按姓名排序的逻辑：

Collections.sort(allResults, (a, b) -> {
    int scoreCompare = Integer.compare(b.getScore(), a.getScore());
    // 分数不同按分数排，分数相同按姓名升序排
    return scoreCompare != 0 ? scoreCompare : a.getName().compareTo(b.getName());
});

JavaScript 排序 #

用数组的sort方法，同样简洁：

// 按分数降序排列
allResults.sort((playerA, playerB) => playerB.score - playerA.score);

3. 用图表展示排序后的结果 #

新手不用自己从零写图表逻辑，用成熟的轻量库就能快速实现：

Android 平台推荐用 MPAndroidChart #

这是Android端非常流行的图表库，集成简单：

1. 先准备图表需要的数据集：

ArrayList<BarEntry> scoreEntries = new ArrayList<>();
ArrayList<String> nameLabels = new ArrayList<>();

// 遍历排序后的结果，把数据转成图表需要的格式
for (int i = 0; i < allResults.size(); i++) {
    PlayerResult result = allResults.get(i);
    scoreEntries.add(new BarEntry(result.getScore(), i));
    nameLabels.add(result.getName());
}

2. 绑定数据到图表控件：

BarDataSet dataSet = new BarDataSet(scoreEntries, "家人答题分数");
BarData barData = new BarData(nameLabels, dataSet);

// 获取布局里的BarChart控件
BarChart scoreChart = findViewById(R.id.score_chart);
scoreChart.setData(barData);
scoreChart.invalidate(); // 刷新图表显示

Web 前端推荐用 Chart.js #

前端用这个库生成图表超方便：

1. 先在HTML里加一个canvas容器：

<canvas id="scoreChart" width="400" height="200"></canvas>

2. 用JavaScript生成柱状图：

// 获取canvas上下文
const ctx = document.getElementById('scoreChart').getContext('2d');

// 从排序后的结果里提取姓名和分数数组
const names = allResults.map(player => player.name);
const scores = allResults.map(player => player.score);

// 创建图表
new Chart(ctx, {
    type: 'bar', // 可以换成'line'或者'pie'，根据你喜欢的样式来
    data: {
        labels: names,
        datasets: [{
            label: '答题分数',
            data: scores,
            backgroundColor: 'rgba(255, 159, 64, 0.6)',
            borderColor: 'rgba(255, 159, 64, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: '分数'
                }
            },
            x: {
                title: {
                    display: true,
                    text: '家人姓名'
                }
            }
        }
    }
});

额外小提示 #

• 如果你的应用需要保存结果（比如下次打开还能看到），可以把列表存到本地存储（Android用SharedPreferences，Web用localStorage）
• 图表样式可以根据自己的喜好调整，比如颜色、字体、图表类型（柱状图、饼图都可以）

内容的提问来源于stack exchange，提问作者Paweł