Question

我想从api网关获取json数据并在网页上创建动态图。以下是代码，但无法正常工作。请看一下。

Api网关网址：https://2yk2p2h7j1.execute-api.us-east-1.amazonaws.com/production

我还添加了

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Serverless S3 storage prices</title>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">

window.onload = function () {
var api_gateway_url = 'https://2yk2p2h7j1.execute-api.us-east-1.amazonaws.com/production';

        var rows = [];

 $.get(api_gateway_url, function(data) {
            data.forEach(function(item) {
              	var chart = new CanvasJS.Chart("chartContainer", {
		theme: "theme2",//theme1
		title:{
			text: "render() Method"              
		},
		data: [              
		{
			type: "column",
			dataPoints: [
				{ label: "apple",  y: rows.push(`${item['id']['S']}`)  }
			]
		}
		]
	});
	chart.render();
});          

 });
}
</script>
  </head>
  <body>
  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
    
  </body>
</html>

使用api网关在网页中创建图形

0 个答案: