Question

我正在循环数据源以获取数据。图表显示我想要的图例和正确的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

以下是观点来源：

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 -->

Answer 1

您的输出需要采用

格式

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>
]);

Answer 2

问题在于，在您的示例中，您只为每个人绘制一个数据点，因此不会看到任何行。我拿了你的源输出并修改它以显示一条线。你只需要让你的输出模仿它。

<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>

Answer 3

看起来逗号位置可能存在问题 - 您将获得['Date Worked','a','b',],[...][...][...]而不是所需的['Date Worked','a','b'],[...],[...],[...]

要解决此问题，请尝试将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>
]);

即。在第一个元素之后将逗号作为两个循环的第一个输出。

您可能还需要查看使用JsStringFormat函数来确保正确编码数据库输出（特别是对于name变量）。

Answer 4

你在javascript中有ColdFusion标签。由于ColdFusion在服务器上运行并且javascript在客户端上运行，这几乎总是一个糟糕的计划。

为什么我的Google Line Chart没有显示行？

4 个答案: