Spring MVC+Thymeleaf+Highcharts实现性别统计饼图无数据问题求助

错误核心原因 #

1. 前端给Highcharts数据的y字段赋值错误，误将整个用户对象赋值给需要数字类型的y属性
2. 后端SQL写法不规范，SELECT * GROUP BY gender在多数SQL模式下执行失败，且返回结果缺少对应统计字段的映射

修复步骤 #

1 后端代码调整 #

1.1 修正Repository查询语句

仅查询需要的性别、对应统计数量两个字段，避免GROUP BY语法错误：

@Query(value = "SELECT gender, count(*) AS count_gender FROM user GROUP BY gender", nativeQuery = true)
List<User> allusers();

1.2 补充实体字段映射

在你的User实体类中补充count_gender字段的定义，确保序列化后前端能拿到统计值：

// User类中新增字段
private Integer count_gender;
// 补充对应的getter、setter方法
public Integer getCount_gender() {
    return count_gender;
}
public void setCount_gender(Integer count_gender) {
    this.count_gender = count_gender;
}

如果不想污染User实体，也可以自定义一个仅包含gender和count_gender的DTO类接收查询结果

2 前端JS代码调整 #

修正AJAX回调中数据组装的逻辑，将统计值赋值给y字段：

$.ajax({
    url: 'piechart',
    dataType:'json',
    success: function(result){
        var series=[];
        var data= [];
        for(var i=0;i<result.length;i++){
            var object={};
            object.name=result[i].gender;
            // 修正此处：将统计数赋值给y，而非整个对象
            object.y=result[i].count_gender;
            data.push(object);
        }
        var seriesObject={
                name:'性别占比',
                colorByPoint: true,
                data: data
        }
        series.push(seriesObject);
        drewPiechart(series);
    }
})

错误现象参考 #

#

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