我正在循环访问数据源以获取数据。图表显示我想要的图例和正确的 x 和 y 轴，但线条不显示。关于为什么会这样的任何想法？源代码如下:
<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
这是 View 源:
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 -->
最佳答案
您的输出需要采用以下格式
var data = google.visualization.arrayToDataTable ([
['Date Worked','2012-12-18'],
['Keegan',0],
['Brady',0],
['Isaac',0],
['Christoph',5.5],
['Tyler',0]
]);
您必须重新处理输出以正确格式化 JavaScript
这未经测试或完整，但这应该有助于让您走上正确的输出轨道
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>
]);
关于javascript - 为什么我的 Google 折线图不显示线条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14159711/