为什么我的Google折线图不显示折线？
[英]Why is my Google Line Chart not displaying lines?
问题描述
I am looping through a datasource to grab data. 
我正在遍历数据源以获取数据。 The chart displays with the legend I want and the correct x and y axis but the lines do not display. 图表显示了我想要的图例以及正确的x和y轴，但未显示线条。 Any thoughts on to why this is? 对为什么会这样有任何想法吗？ Source code below: 源代码如下：
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<cfoutput>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable ([
['Date Worked',<cfloop query="name"> '#name#',</cfloop>],
<cfloop from="2012-12-18" to="2012-12-18" index="i">
<cfquery name="test" datasource="TrackPorter">
select name, COALESCE(date_worked,'2012-12-18')date_worked, COALESCE(hours_worked,0)hours_worked
from users
left join records on users.id = records.users_id and date_worked = '2012-12-18'
where active_pilot = 1
order by date_worked asc
</cfquery>
['#test.date_worked#', #Valuelist(test.hours_worked)#]
</cfloop>
]);
var options = {
title: 'Test'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</cfoutput>
<div id="chart_div" style="width: 900px; height: 500px;"></div
Here is the view source: 这是视图源：
Here is the view source:
<html>
<div class="container" align="center">
<h1>Pilot Timesheet</h1>
<a href="excel_sheet_downloader.cfm"><button class="btn" type="button" name="download_pilot_report">Download</button></a>
<br />
<br />
<h1>Grapher</h1>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable ([
['Date Worked', 'Keegan', 'Brady', 'Isaac', 'Christoph', 'Tyler',],
['2012-12-18', 0.0,0.0,0.0,5.5,0.0]
]);
var options = {
title: 'Test'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</div> <!-- /container -->
4 个解决方案
解决方案1
4 已采纳 2013-01-04 16:00:11
Your output needs to be in a format of 您的输出必须采用以下格式
var data = google.visualization.arrayToDataTable ([
['Date Worked','2012-12-18'],
['Keegan',0],
['Brady',0],
['Isaac',0],
['Christoph',5.5],
['Tyler',0]
]);
You'll have to rework your output to correctly format the JavaScript 您必须重新整理输出以正确设置JavaScript格式
This isn't tested or complete, but this should help get you on the right track of output 这还没有经过测试或完成，但是应该可以帮助您正确地进行输出
var data = google.visualization.arrayToDataTable ([
['Date Worked',
<cfset count = 0>
<cfloop from="2012-12-18" to="2012-12-18" index="i">'#i#'<cfif count NEQ numberofloopsneeded (you need to calculate this)>,</cfif><cfset count++></cfloop>],
<cfloop from="2012-12-18" to="2012-12-18" index="i">
<cfquery name="test" datasource="TrackPorter">
select name, COALESCE(date_worked,'2012-12-18')date_worked, COALESCE(hours_worked,0)hours_worked
from users
left join records on users.id = records.users_id and date_worked = '2012-12-18'
where active_pilot = 1
order by date_worked asc
</cfquery>
<cfloop query="test">
['#test.name[test.currentrow]#', #test.hours_works[test.currentrow]#]<cfif not thefinaloutput>,</cfif>
</cfloop>
</cfloop>
]);
解决方案2
2 2013-01-04 16:07:45
The problem is that in your example you are only plotting one data point for each person, therefore no line is seen. 问题在于，在您的示例中，您只为每个人绘制一个数据点，因此看不到任何线。 I took your source output and modified it to show a line. 我将您的源输出修改为显示一行。 You will just need to get your output to mimic this. 您只需要获取输出以模仿此内容即可。
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="container" align="center">
<h1>Pilot Timesheet</h1>
<a href="excel_sheet_downloader.cfm"><button class="btn" type="button" name="download_pilot_report">Download</button></a>
<br />
<br />
<h1>Grapher</h1>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable ([
['Date Worked', 'Keegan', 'Brady', 'Isaac', 'Christoph', 'Tyler'],
['2012-12-18', 0.0,0.0,0.0,5.5,0.0],
['2012-12-18', 0.0,0.0,0.0,4.5,0.0],
['2012-12-18', 0.0,0.0,0.0,3.5,0.0],
['2012-12-18', 0.0,0.0,0.0,2.5,0.0]
]);
var options = {
title: 'Test'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</div> <!-- /container -->
</body>
</html>
解决方案3
1 2013-01-04 15:36:05
It looks like there may be an issue with comma placement - you'll be getting ['Date Worked','a','b',],[...][...][...] instead of the desired ['Date Worked','a','b'],[...],[...],[...] 看来逗号放置可能有问题-您将获得['Date Worked','a','b',],[...][...][...]而不是所需的['Date Worked','a','b'],[...],[...],[...]
To fix that, try changing your var data section to this: 要解决此问题，请尝试将var data部分更改为此：
var data = google.visualization.arrayToDataTable ([
['Date Worked' <cfloop query="name">, '#name#'</cfloop>]
<cfloop from="2012-12-18" to="2012-12-18" index="i">
<!--- query removed for readability --->
, ['#test.date_worked#', #Valuelist(test.hours_worked)#]
</cfloop>
]);
ie placing the commas as the first output for both loops, after the first elements. 也就是说，将逗号作为两个循环的第一个输出，放在第一个元素之后。
You may also need to look at using JsStringFormat function to ensure the database output is correctly encoded (particularly for name variable). 您可能还需要查看使用JsStringFormat函数以确保正确编码了数据库输出（尤其是对于name变量）。
解决方案4
0 2013-01-04 15:27:09
You have ColdFusion tags inside javascript. 您在javascript中有ColdFusion标签。 Since ColdFusion runs on the server and javascript runs on the client that's pretty much always a bad plan. 由于ColdFusion在服务器上运行，而javascript在客户端上运行，这几乎总是一个不好的计划。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.