Yii2无法使用highcharts查看柱形图

我正在尝试通过 yii2 中的 highchart 绘制图表。我已经安装并设置了。下面是我的代码index.php view

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

            for (var i = 0; i < data.length; i++) {
                categories.push(data[i].sub_division);
                totalConnections.push(data[i].total_connections);
                surveysDone.push(data[i].surveys_done);
            }
            console.log(categories)
            // Initialize Highcharts with retrieved data
           Highcharts.chart('chart-container', {
chart: {
    type: 'column'
},
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: { // Add plotOptions here
    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 () {
            alert('An error occurred while loading the chart data.');
        }
    });
}

Output

该图表确实显示了 x 和 y 轴，但不显示其中的数据（列）。

另外，我在控制台上没有收到任何错误。

Update 1

我在我的 highchart 中添加了以下代码

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

但日志没有向我显示此消息

Update 2

这是我的fiddle https://jsfiddle.net/1wgudyr4/2/

任何帮助将不胜感激。

日期应以number, not a string. And console.log()没有被调用，因为events.load应该在chart.

var categories = ['SANDA', 'GULSHAN-E-RAVI', 'NAWANKOT', 'SHAD BAGH'];
var surveysDone = [0, 166, 169, 0];

Highcharts.chart('chart-container', {
 chart: {
   type: 'column',
   events: {
     load: function() {
       console.log('Chart loaded successfully');
     }
   }
 },
 xAxis: {
   categories: categories,
 },
 series: [{
   data: surveysDone
 }]
});

Demo: https://jsfiddle.net/BlackLabel/0u8v5b1L/ https://jsfiddle.net/BlackLabel/0u8v5b1L/
API: https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/highcharts/chart.events.load