Yii2中Highcharts柱状图仅显坐标轴无数据的问题求助

可能的问题点及对应解决方案 #

1. loadChartData函数未执行 #

代码仅定义了loadChartData函数，但未触发调用，导致AJAX请求未发送、图表未初始化。

修复：
在脚本末尾添加页面加载完成后的函数调用：

$(document).ready(function() {
    loadChartData();
});

2. Yii2变量$url_chart未正确解析 #

在Yii2视图中，直接写'$url_chart'会被当作字符串，无法解析为实际路由URL，导致AJAX请求无效。

修复：
使用Yii2的PHP输出语法解析变量：

url: '<?= $url_chart ?>',

3. 数据类型不符合Highcharts要求 #

若AJAX返回的surveys_done是字符串格式数字（比如从数据库直接取出的字符串），Highcharts无法正确渲染柱子。

修复：
提取数据时转换为数字类型：

surveysDone.push(parseInt(data[i].surveys_done));
totalConnections.push(parseInt(data[i].total_connections));

4. 图表容器缺失或样式问题 #

页面必须存在id="chart-container"的元素，且需设置明确宽高，否则图表无法正常渲染：

<div id="chart-container" style="width: 100%; height: 400px;"></div>

5. Highcharts配置中events位置错误 #

你添加的load事件需放在chart配置项内，否则无法触发：

chart: {
    type: 'column',
    events: {
        load: function () {
            console.log('Chart loaded successfully');
        }
    }
},

完整修复后的视图示例代码 #

<div id="chart-container" style="width: 100%; height: 400px;"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
function loadChartData() {
    $.ajax({
        url: '<?= $url_chart ?>', 
        method: 'GET',
        dataType: 'json',
        success: function (data) {
            var categories = [];
            var totalConnections = [];
            var surveysDone = [];

            for (var i = 0; i < data.length; i++) {
                categories.push(data[i].sub_division);
                totalConnections.push(parseInt(data[i].total_connections));
                surveysDone.push(parseInt(data[i].surveys_done));
            }
            console.log('Categories:', categories);
            console.log('Survey Data:', surveysDone);

            Highcharts.chart('chart-container', {
                chart: {
                    type: 'column',
                    events: {
                        load: function () {
                            console.log('Chart loaded successfully');
                        }
                    }
                },
                title: {
                    text: 'Sub-Division Wise Survey Count and Connections'
                },
                xAxis: {
                    categories: categories,
                    title: {
                        text: 'Sub-Division'
                    }
                },
                yAxis: {
                    title: {
                        text: 'Count'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return 'Sub-Division: <b>' + this.x + '</b><br>'
                            + 'Total Connections: <b>' + totalConnections[this.point.index] + '</b><br>'
                            + 'Surveys Done: <b>' + surveysDone[this.point.index] + '</b>';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            inside: true,
                            color: 'red',
                            style: {
                                fontWeight: 'bold'
                            },
                            formatter: function () {
                                return this.y;
                            }
                        }
                    }
                },
                series: [{
                    name: 'Total Survey Done',
                    data: surveysDone
                }]
            });
        },
        error: function (xhr, status, error) {
            console.error('AJAX Error:', status, error);
            alert('An error occurred while loading the chart data.');
        }
    });
}

$(document).ready(function() {
    loadChartData();
});
</script>

额外排查建议 #

• 打开浏览器开发者工具的网络标签，查看AJAX请求是否成功，返回的数据格式是否符合预期（应为包含sub_division、total_connections、surveys_done字段的JSON数组）。
• 直接访问$url_chart对应的URL，验证后端返回的JSON数据是否正确。

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