html 和 txt 文件都在同一文件夹中。
尝试将完整位置放入网址,例如:/home/lp505/Desktop/chart/output.txt ,但没有成功。
尝试使用 type 作为 'get' ,它也不起作用。
我认为错误出在方法drawchart中 请帮助我调试代码以创建图表
html代码是
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart () {
$.ajax({
url: 'output.txt',
type: 'text',
success: function (txt) {
var dataArray = [['Name', 'Date']];
var txtArray = txt.split('\n');
for (var i = 0; i < txtArray.length; i++) {
var tmpData = txtArray[i].split(/\s+/);
dataArray.push(tmpData[0], parseInt(tempData[1]));
}
var data = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.LineChart(document.querySelector('chart_div'));
var options = {'title':'What is this','width':400,'height':300};
chart.draw(data,options);
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
txt文件
Screen_Home 13
Screen_Home 26
Screen_Explore 26
Screen_Explore 27
Screen_Home 27
Screen_Home 28
最佳答案
我发现了一些问题...
1) 请务必包含 JQuery
,没有在您的 HTML
中看到它
2) 设置AJAX调用类型为get
3) tmpData
此处拼写错误 --> parseInt(tempData[1])
4) 每行数据应该是一个数组值
From:
dataArray.push(tmpData[0], parseInt(tempData[1]));
To:dataArray.push([tmpData[0], parseInt(tmpData[1])]);
5) 在 id
上使用 querySelector
时,请务必添加前缀 #
这应该绘制你的图表...
<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart () {
$.ajax({
url: 'output.txt',
type: 'get',
success: function (txt) {
var dataArray = [['Name', 'Date']];
var txtArray = txt.split('\n');
for (var i = 0; i < txtArray.length; i++) {
var tmpData = txtArray[i].split(/\s+/);
dataArray.push([tmpData[0], parseInt(tmpData[1])]);
}
var data = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
var options = {'title':'What is this','width':400,'height':300};
chart.draw(data,options);
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>
<div id="chart_div"></div>
关于javascript - 需要根据 .txt 文件中的数据创建 Google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34774254/