Thymeleaf Spring的谷歌图表。Javascript循环

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/45/css/util/util.css">

<div id="chart_div"></div>

<script th:inline="javascript">
    // 获取后端传递的数据
    var data = [[${data}]];
    
    // 加载谷歌图表库
    google.charts.load('current', {'packages':['corechart']});
    
    // 设置加载成功后的回调函数
    google.charts.setOnLoadCallback(drawChart);
    
    // 绘制图表的函数
    function drawChart() {
        // 创建数据表对象
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Name');
        dataTable.addColumn('number', 'Value');
        
        // 填充数据表
        for (var i = 0; i < data.length; i++) {
            dataTable.addRow([data[i].name, data[i].value]);
        }
        
        // 设置图表选项
        var options = {
            title: 'Chart Title',
            width: 400,
            height: 300
        };
        
        // 创建图表对象并绑定到HTML元素
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
    }
</script>