1

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

4

4 回答 4

4

您的输出需要采用以下格式

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>
]);
于 2013-01-04T16:00:11.337 回答
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>
于 2013-01-04T16:07:45.610 回答
1

看起来逗号放置可能存在问题 - 你会得到['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变量）。

于 2013-01-04T15:36:05.020 回答
0

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

于 2013-01-04T15:27:09.450 回答