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

【问题标题】：not able to display data in google charts using json无法使用 json 在谷歌图表中显示数据
【发布时间】：2018-05-30 09:45:45
【问题描述】：

我正在从 MySQL 获取数据，并希望使用谷歌图表将其显示在折线图中。我正在使用 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>

图表未显示。

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

【问题讨论】：

您是否在控制台中遇到任何错误？
没有..没有错误..
然后确保您在其中呈现图表的父元素具有高度
还检查元素以查看图表元素是否存在于 dom 中
对不起..我的javascript不太好..如果你能提供更多细节或任何链接。下面是我在其中显示图表的 div

标签： javascript

【解决方案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 文档中的 this 示例

【讨论】：

@NikhilKumawat 更新了我的答案