Question

我想使用php从MySQL中的数据创建图表。我使用json_encode获取谷歌图表中的数据。我可以看到图表，但它显示没有数据可用.Below是我的图表页面的页面源。

<html>
<head>
</head>
<body>

 <script type="text/javascript">
   var encoded_P1data = ["1111","1234","1111","1111","1234","1111","1111","1234","1111","1111"];
   var encoded_P2data = ["2222","2345","2222","2222","2345","2222","2222","2345","2222","2222"];
   var encoded_P3data = ["3333","3456","3333","3333","3456","3333","3333","3456","3333","3333"];
   var encoded_P4data = ["4444","4567","4444","4444","4567","4444","4444","4567","4444","4444"];
   var encoded_xdata = ["10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00"];
 </script>
 <script  type="text/javascript" src="jsapi.js"></script> 
 <script type="text/javascript">
   google.load('visualization', '1', {'packages':['annotatedtimeline']});
   google.setOnLoadCallback(drawChart);
   var RecordTime= new Array;
   var P1data = new Array;  // This would be the first array passed from PHP
   var P2data = new Array;  // This would be the second array passed from PHP
   var P3data= new Array; // This would be the third array passed from PHP
   var P4data = new Array;  // This would be the second array passed from PHP

  P1data = encoded_P1data;  
  P2data = encoded_P2data;  
  P3data= encoded_P3data; 
  P4data = encoded_P4data; 
  RecordTime = encoded_xdata ;

  function drawChart() {
    var data = new google.visualization.DataTable();

   data.addColumn('datetime', 'RecordTime');
   data.addColumn('number', 'P1');
   data.addColumn('number', 'P2');
   data.addColumn('number', 'P3');
   data.addColumn('number', 'P4');

   /* create for loops to add as many columns as necessary */
   var len = encoded_P1data.length;
   data.addRows(len);
   for(i=0; i<len; i++) {
     data.setValue(i, 0, new Date(RecordTime[i])),
     //data.setValue(i, 0, RecordTime([i]));     /* x-axis */
     data.setValue(i, 1, parseInt(P1data[i])),   /* Y-axis category #1*/
     data.setValue(i, 2, parseInt(P2data[i])),   /* Y-axis category #2*/
     data.setValue(i, 1, parseInt(P3data[i])),   /* Y-axis category #3*/
     data.setValue(i, 2, parseInt(P4data[i]))   /* Y-axis category #4*/
   }

   /**************************end of loops*****************************/

   var chart = new
     google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
   chart.allowRedraw = true;
   chart.draw(data, {displayAnnotations: false });
 }
 //chart.draw(data);
 </script>
 </body>

 <div id='chart_div' style='width: 800px; height: 600px;'></div>

 </html>

Answer 1

这是我自己的问题的答案......

   <html>
   <head>
   </head>
   <body>

      <script type="text/javascript">
           var encoded_P1data =["1111","1234","1111","1111","1234","1111","1111","1234","1111","1111"];
           var encoded_P2data = ["2222","2345","2222","2222","2345","2222","2222","2345","2222","2222"];
           var encoded_P3data = ["3333","3456","3333","3333","3456","3333","3333","3456","3333","3333"];
           var encoded_P4data=["4444","4567","4444","4444","4567","4444","4444","4567","4444","4444"];
           var encoded_xdata = ["10:20:00","10:20:00","10:20:00","10:40:00","10:50:00","11:00:00","11:10:00","11:20:00","11:30:00","11:40:00"];
       </script>

        <script  type="text/javascript" src="jsapi.js"></script> 
        <script type="text/javascript">
        google.load('visualization', '1', {'packages':['annotatedtimeline']});
         google.setOnLoadCallback(drawChart);
        var RecordTime= new Array;
        var P1data = new Array;  // This would be the first array passed from PHP
        var P2data = new Array;  // This would be the second array passed from PHP
        var P3data= new Array; // This would be the third array passed from PHP
        var P4data = new Array;  // This would be the second array passed from PHP

       P1data = encoded_P1data;  
       P2data = encoded_P2data;  
       P3data= encoded_P3data; 
       P4data = encoded_P4data; 
       RecordTime = encoded_xdata ;


         function drawChart() {
     var data = new google.visualization.DataTable();

    data.addColumn('datetime', 'RecordTime');
    data.addColumn('number', 'P1');
    data.addColumn('number', 'P2');
    data.addColumn('number', 'P3');
    data.addColumn('number', 'P4');

      /* create for loops to add as many columns as necessary */

      // changed because you didn't give me a jsonarray variable
      //var len = jsonarray.length;
     var len = RecordTime.length;

     data.addRows(len);
    for (i = 0; i < len; i++) {
       // we need to convert times to Date objects
        var timesplit = RecordTime[i].split(':');
         data.setValue(i, 0, new Date(2000, 0, 0, timesplit[0], timesplit[1], timesplit[2])); /* x-axis */
        data.setValue(i, 1, parseInt(P1data[i])); /* Y-axis category #1*/
        data.setValue(i, 2, parseInt(P2data[i])); /* Y-axis category #2*/
        data.setValue(i, 3, parseInt(P3data[i])); /* Y-axis category #1*/
        data.setValue(i, 4, parseInt(P4data[i])); /* Y-axis category #2*/
     }
    /*********************************end of 
      loops***************************************/

     // changed chart to AnnotatedTimeline
    var chart = new     google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
     chart.allowRedraw = true;
     chart.draw(data, {
        displayAnnotations: false,
         // format time to show only hours:minutes:seconds
        dateFormat: 'HH:mm:ss'
      });
   }
 </script>
      <div id="chart_div" style="height: 400px; width: 600px;"></div>
  </body>
  </html>

Google图表显示“无可用数据”

1 个答案: