无法使用json在Google图表中显示数据

Question

我从MySQL获取数据，并希望使用Google图表将其显示在折线图中。 我正在使用Java和JavaScript。

这是我从MySQL获取的数据类型：

时间戳记 2017-06-12 19：22：23.0，2017-06-12 19：22：25.0
f1 414 413

我将这些数据保存到结果集中，并将其转换为JSONarray，输出类似于：'[{“ f1”：414，“ ts”：“ 2017-06-12 19：22：23.0”}，{“ f1”： 415，“ ts”：“ 2017-06-12 19：22：25.0”}]'

->从servlet，我将此字符串传递到jsp文件。

现在，JSP文件：

<script type="text/javascript">
$(document).ready(function(){
    alert('hello');
});


var newstring =  <%= request.getAttribute("json_string")%>
<%System.out.println(request.getAttribute("json_string"));%>
var chartData = JSON.parse(newstring);


// Load google charts
google.load('visualization', '1.1', {packages:["corechart, table"]});
google.charts.setOnLoadCallback(drawChart);



// Draw the chart and set the chart values



    var dTable = new google.visualization.DataTable();
    dTable.addColumn('string','timestamp'); 
    dTable.addColumn('number','f1');

    for(i=0;i<chartData.length;i++)
    {
        var currentObj = chartData[i];
        dTable.addRow([currentObj.f1,currentObj.ts]);
    }


  // Display the chart inside the <div> element with id="linechart"
    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(data, options);



</script>

图表未显示。

任何帮助，将不胜感激。 或者，如果还有其他方法，请写下来。

Answer 1

您在创建图表时使用一些变量数据时将所有值添加到dTable中，正确的方法应该是

chart.draw(dTable , options);

并且没有drawChart函数，您应该将所有内容包装在函数lioke中

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

    for(i=0;i<chartData.length;i++)
    {
        var currentObj = chartData[i];
        dTable.addRow([currentObj.f1,currentObj.ts]);
    }


  // Display the chart inside the <div> element with id="linechart"
    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);

}

还可以从api文档中查看此示例