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

問題は、あなたの例では、各人に対して 1 つのデータ ポイントのみをプロットしているため、線が表示されないことです。ソース出力を取得し、行を表示するように変更しました。これを模倣するには、出力を取得する必要があります。

<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 に答える