0
我正在尝试创建每分钟价格更改的折线图。我需要能够从我的网站上获取数据。如果我使用datetime作为x轴,我无法加载图表。导入日期时间时无法创建Google图表
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "sampleData.json",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 800, height: 480});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
我可以利用创建图表sampleData.json如下:
{
"cols": [
{"id":"","label":"X","pattern":"","type":"string"},
{"id":"","label":"Line 1","pattern":"","type":"number"},
{"id":"","label":"Line 2","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"1","f":null},{"v":3,"f":null},{"v":4,"f":null}]},
{"c":[{"v":"2","f":null},{"v":1,"f":null},{"v":2,"f":null}]},
{"c":[{"v":"3","f":null},{"v":1,"f":null},{"v":3,"f":null}]},
{"c":[{"v":"4","f":null},{"v":1,"f":null},{"v":1,"f":null}]},
{"c":[{"v":"5","f":null},{"v":2,"f":null},{"v":5,"f":null}]}
]
}
但是当我尝试X为datetime改变,它不会加载。
{
"cols": [
{"id":"","label":"X","pattern":"","type":"datetime"},
{"id":"","label":"Line 1","pattern":"","type":"number"},
{"id":"","label":"Line 2","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":new Date(2017,0,1,12,1),"f":null},{"v":3,"f":null},{"v":4,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,2),"f":null},{"v":1,"f":null},{"v":2,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,3),"f":null},{"v":1,"f":null},{"v":3,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,4),"f":null},{"v":1,"f":null},{"v":1,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,5),"f":null},{"v":2,"f":null},{"v":5,"f":null}]}
]
}