Question

我从MySQL获取数据并希望使用谷歌图表在折线图中显示它。我正在使用java和javascript。

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

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

我在结果集中获取了这些数据并将其转换为JSONarray，输出如下：＆＃39; [{＆＃34; f1＆＃34;：414，＆＃34; ts＆＃34;：＆＃34; 2017-06-12 19：22：23.0＆＃34;}，{＆＃34 ; f1＆＃34;：415，＆＃34; ts＆＃34;：＆＃34; 2017-06-12 19：22：25.0＆＃34;}]＆＃39;

- ＆GT;从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 docs中的this示例

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

1 个答案: