使用Google Charts展示MySQL数据失败求助（Java+JavaScript）

我帮你排查了代码里的几个关键问题，这些都是导致折线图无法渲染的核心原因，下面一步步修正并给出完整的可行方案：

首先，原代码的核心错误点 #

• 数据列顺序颠倒：你定义的DataTable第一列是timestamp（字符串类型），第二列是f1（数字类型），但循环添加行的时候，把f1的值放在了第一个位置，时间戳放在第二个，这会导致数据类型不匹配，图表无法识别数据。
• 变量名错误：最后调用chart.draw(data, options)时，你实际创建的DataTable变量是dTable，这里误用了未定义的data变量，直接导致图表无法获取数据。
• Google Charts加载逻辑错误：google.load已经被官方废弃，而且你没有把绘制图表的逻辑包裹在drawChart函数里，google.charts.setOnLoadCallback需要传入一个函数来确保在图表库加载完成后再执行绘制逻辑，原代码的执行时机不对。
• JSON解析可能存在语法问题：如果Servlet传递的json_string已经是合法的JSON数组（不带外层单引号），直接赋值即可，不需要JSON.parse；如果是带单引号的字符串，需要确保JSP输出的语法正确。

修正后的完整JSP JavaScript代码 #

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert('hello');
});

// 获取Servlet传递的JSON数据
var chartData = <%= request.getAttribute("json_string")%>;
// 如果你的json_string是带单引号的字符串，就用下面这行替换上面的：
// var chartData = JSON.parse('<%= request.getAttribute("json_string")%>'.replace(/'/g, '"'));

// 加载Google Charts并绘制图表
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // 创建DataTable
    var dTable = new google.visualization.DataTable();
    dTable.addColumn('string', 'timestamp');
    dTable.addColumn('number', 'f1');

    // 循环添加数据行（注意顺序：时间戳在前，f1值在后）
    for(var i=0; i<chartData.length; i++) {
        var currentObj = chartData[i];
        dTable.addRow([currentObj.ts, currentObj.f1]);
    }

    // 图表配置选项
    var options = {
        'title': '<%= request.getAttribute("Spring_type") + " for date :" %><%= request.getAttribute("date")%>',
        'width': 550,
        'height': 400,
        curveType: 'function' // 可选：让折线更平滑
    };

    // 绘制图表
    var chart = new google.visualization.LineChart(document.getElementById('linechart'));
    chart.draw(dTable, options);
}
</script>

额外的优化建议（替代实现方案） #

如果想让代码更现代、更易维护，可以采用异步获取数据的方式，而不是通过Servlet直接把JSON嵌入到JSP里：

1. 写一个单独的Servlet接口，比如/getData，返回纯JSON格式的数据（不要带外层单引号）：

// 示例Servlet代码片段
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");
    // 这里是你从MySQL获取并转换为JSONArray的逻辑
    JSONArray jsonArray = getYourDataFromMySQL();
    response.getWriter().write(jsonArray.toString());
}

2. 前端用fetch API异步获取数据并绘制图表：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // 异步获取数据
    fetch('/getData')
        .then(response => response.json())
        .then(chartData => {
            var dTable = new google.visualization.DataTable();
            dTable.addColumn('string', 'timestamp');
            dTable.addColumn('number', 'f1');

            chartData.forEach(item => {
                dTable.addRow([item.ts, item.f1]);
            });

            var options = {
                'title': '<%= request.getAttribute("Spring_type") + " for date :" %><%= request.getAttribute("date")%>',
                'width': 550,
                'height': 400
            };

            var chart = new google.visualization.LineChart(document.getElementById('linechart'));
            chart.draw(dTable, options);
        })
        .catch(error => console.error('获取数据失败:', error));
}
</script>

这种方式的好处是前后端分离，数据更新不需要重新渲染整个页面，代码也更清晰。

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