为什么我的Google折线图不显示线条？

我正在循环访问一个数据源来获取数据。该图表显示了我想要的图例和正确的x和y轴，但不显示这些线。任何想法为什么这是？下面的源代码：为什么我的Google折线图不显示线条？

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

来源

2013-01-04 Christoph Riesterer

如果您查看源代码，当您查看JavaScript时，答案可能会更明显。你能发布生成的JavaScript吗？ –

这里是生成的javascript，当我查看源代码时： –

对不起，查看源代码现在已经超过^^原始问题 –

你的输出必须在

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-04 16:00:11

现在一切都很好。非常感谢你马特和彼得:) –

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

来源

2013-01-04 15:27:09

这里的意图似乎是生成JS数据（而不是在客户端执行CF逻辑），因此将CFML代码放在原处是非常合适的。 –

我正在使用ColdFusion从服务器上的数据库中获取数据。我不相信这是问题。我有一种感觉，问题在于我没有将名称设置为正在绘制图形的值。我对语法看起来有点失落。 –

看起来有可能是用逗号放置一个问题 - 你会得到['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-04 15:36:05

这些逗号现在按照正确的顺序排列，谢谢。行仍然不显示，因此我将查看JsStringFormat函数。再次感谢你！ –

JsStringFormat将修复像'O'Reilly'等东西 - 你的查看源似乎没有这些，所以可能是别的。 –

问题是，在你的例子中，你只是为每个人绘制一个数据点，因此没有看到线。我把你的源代码输出并修改为显示一行。你只需要让你的输出模仿这一点。

<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-04 16:07:45

为什么我的Google折线图不显示线条？

回答

相关问题