使用谷歌图表时容器未定义异常答案

【问题标题】：container not defined exception while working with google charts使用谷歌图表时容器未定义异常
【发布时间】：2018-11-10 01:42:33
【问题描述】：

我正在从 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 文件。

<body>


<!-- header -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Dashboard</a>
    </div>
  </div>
</nav>
<!-- header -->

<h1>welcome</h1>
<script type="text/javascript">
var newstring =  <%= request.getAttribute("json_string")%>
<%System.out.println("value coming to jsp:  "+request.getAttribute("json_string"));%>
var chartData = JSON.parse(newstring);
</script>

<div id="curve_chart"></div>


 <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);
      
      
      


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

      function drawChart() {
    	  var dTable = new google.visualization.DataTable();
   	   
  		dTable.addColumn('string','timestamp'); 
  		
  		dTable.addColumn('number','f1');
  		
  		for(i=0;i<chartData.length;i++)
  		{
  			document.write("...inside for loop");
  		    var currentObj1 = chartData[i];
  		    dTable.addRow([currentObj1.ts,currentObj1.f1]);
  		  
  		}

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        *var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));*

        chart.draw(dTable, options);
      }
    </script>

</body>

我在行中遇到错误

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

错误是：Uncaught (in promise) Error: Container is not defined

任何帮助将不胜感激..

【问题讨论】：

标签： javascript

【解决方案1】：

你去我用谷歌的例子here。希望这会有所帮助

var chartData = [
  {
    "f1":414,
    "ts":"2017-06-12 19:22:23.0"
   },
   {
    "f1":415,
    "ts":"2017-06-12 19:22:25.0"
   }
];

$(document).ready(() => {
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    // var data = [
    //   [
    //     'timestamp',
    //     'f1'
    //   ]
    // ];
    
    // chartData.forEach(item => {
    //   data.push([
    //     item.ts,
    //     item.f1
    //   ]);
    // });
    
    // var dTable = new google.visualization.arrayToDataTable(data);
    
    var dTable = new google.visualization.DataTable();
    dTable.addColumn('string', 'timestamp');
    dTable.addColumn('number', 'f1');
    
    dTable.addRows(chartData.map(item => {
      return [
        item.ts,
        item.f1
      ];
     }));
      
 
    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' },
      width: 400,
      height: 400
    };

    var chart = new google
      .visualization
      .LineChart(document.getElementById('curve_chart'));

     chart.draw(dTable, options);
  }

});

#curve_chart {
  height: 400px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<!-- header -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Dashboard</a>
    </div>
  </div>
</nav>
<!-- header -->

<h1>welcome</h1>
<div id="curve_chart"></div>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</body>

【讨论】：

感谢 Vasile Florin Vilsan... 它有效.. 但我仍然有一个问题，我们如何使用 DataTable() 方法而不是 arrayToDataTable() 来做到这一点。
我已经更新了我的答案。如果您觉得这有帮助，请不要忘记将其标记为您的问题的答案。