需要根据.txt文件中的数据创建谷歌图表
Need to create a Google Chart from data in .txt file
html 和 txt 文件都在同一个文件夹中。
尝试将完整位置放在网址上,例如:/home/lp505/桌面/图表/输出.txt,但它不起作用。
尝试使用类型作为"get",它也不起作用。
我认为错误在方法绘制图表中请帮助我调试代码以创建图表
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)每行数据应该是一个值数组
寄件人:
dataArray.push(tmpData[0], parseInt(tempData[1]));
收件人: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>
相关文章:
- 使用AJAX创建数据列表
- 如何为 Flot JS 动态创建数据集
- 指定单击以从数据库中动态创建数据
- 如何在 C# 中使用多个嵌套 JSON 对象创建数据表
- 调用成功后重新创建数据,AJAX
- 标签在创建数据通道中的作用是什么以及如何正确使用它
- 使用 C# 在控制器中创建数据结构并将其传递到视图中
- 从上传的 csv 数据创建数据表列定义
- 为谷歌图表创建数据数组
- 如何在html中创建数据模板
- 在mongo中检查数据并创建数据的有效方法'不存在
- 如何为Breeze创建数据绑定适配器
- 谷歌图表-从Ajax创建数据
- 使用jQuery和Bootstrap创建数据表,而不是使用基本的HTML
- 我如何使用Ember创建数据驱动的文本输入
- 如何为一艘船创建数据模型
- 如何在chart.js中动态创建数据集
- 动态创建数据uri
- 使用Javascript为CakePHP创建数据数组
- 通过变量中的json数据在js中创建数据表