從MySQL PHP谷歌線型圖數據迴應

我試圖使用PHP的echo 這個代碼顯示了一個圖表，我想看看我是否可以通過回聲改變數據顯示從數據庫中的數據（改變350的值別的東西）。我在下面的示例代碼中試過了，但它不起作用。什麼可能是錯的？從MySQL PHP谷歌線型圖數據迴應

這行有php var raw_data = [['Website'，，73，104，129，146，176，139，149，218，194，96，253]，現在我還沒有從mysql我打算做以後一旦我確定我可以使用echo

<script> 

     /* 
     * This script is dedicated to building and refreshing the demo chart 
     * Remove if not needed 
     */ 

     // Demo chart 
     var chartInit = false, 
      drawVisitorsChart = function() 
      { 
       // Create our data table. 
       var data = new google.visualization.DataTable(); 
       var raw_data = [['Website', <?php echo '350';?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253], 
           ['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91], 
           ['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51], 
           ['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]]; 

       var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

       data.addColumn('string', 'Month'); 
       for (var i = 0; i < raw_data.length; ++i) 
       { 
        data.addColumn('number', raw_data[i][0]); 
       } 

       data.addRows(months.length); 

       for (var j = 0; j < months.length; ++j) 
       { 
        data.setValue(j, 0, months[j]); 
       } 
       for (var i = 0; i < raw_data.length; ++i) 
       { 
        for (var j = 1; j < raw_data[i].length; ++j) 
        { 
         data.setValue(j-1, i+1, raw_data[i][j]); 
        } 
       } 

       // Create and draw the visualization. 
       // Learn more on configuration for the LineChart: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html 
       var div = $('#demo-chart'), 
        divWidth = div.width(); 
       new google.visualization.LineChart(div.get(0)).draw(data, { 
        title: 'Monthly unique visitors count', 
        width: divWidth, 
        height: $.template.mediaQuery.is('mobile') ? 180 : 265, 
        legend: 'right', 
        yAxis: {title: '(thousands)'}, 
        backgroundColor: ($.template.ie7 || $.template.ie8) ? '#494C50' : 'transparent', // IE8 and lower do not support transparency 
        legendTextStyle: { color: 'white' }, 
        titleTextStyle: { color: 'white' }, 
        hAxis: { 
         textStyle: { color: 'white' } 
        }, 
        vAxis: { 
         textStyle: { color: 'white' }, 
         baselineColor: '#666666' 
        }, 
        chartArea: { 
         top: 35, 
         left: 30, 
         width: divWidth-40 
        }, 
        legend: 'bottom' 
       }); 

       // Message only when resizing 
       if (chartInit) 
       { 
        notify('Chart resized', 'The width change event has been triggered.', { 
         icon: 'img/demo/icon.png' 
        }); 
       } 

       // Ready 
       chartInit = true; 
      }; 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1', { 
      'packages': ['corechart'] 
     }); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawVisitorsChart); 

     // Watch for block resizing 
     $('#demo-chart').widthchange(drawVisitorsChart); 

     // Respond.js hook (media query polyfill) 
     $(document).on('respond-ready', drawVisitorsChart); 

    </script>

來源

2016-01-30 ABI

我花了一段時間找到它，但我刪除了初始評論。當你說「它不工作」，你能更具體嗎？ – RamRaider

@RamRaider我試圖改變從350到別的東西的價值，但圖形消失一旦我這樣做。 – ABI

，但'350'實際上是否被寫入源代碼中的變量（查看源代碼）？我建議你從'350'附近刪除引號 - 你需要一個數字，你用PHP編寫的內容在技術上是一個字符串〜ie <？php echo 350;？>應該這樣做 – RamRaider

我不能肯定，但我認爲這個問題的JavaScript代碼中別的地方處理數據。在測試時我得到了一些錯誤，可能與$.template〜onc ethey有關，被刪除/替換圖表工作。

頁面必須具有.php擴展來解釋PHP代碼。要在控制檯調試取決於瀏覽器使用 - 通常如果右鍵點擊頁面並選擇inspect element控制檯將出現在底部 - 你看到了什麼取決於瀏覽器，但肯定火狐&瀏覽器都已經標籤稱爲console - 手錶並尋找錯誤！

<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8'> 
     <title>jQuery experiments with Google apis</title> 
     <script src='https://www.google.com/jsapi'></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script> 

      divWidth=600; 
      divHeight=400; 



      var chartInit = false, 
       drawVisitorsChart = function(){ 
        var data = new google.visualization.DataTable(); 
        var raw_data = [['Website', <?php echo 428;?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253], 
            ['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91], 
            ['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51], 
            ['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]]; 

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

        data.addColumn('string', 'Month'); 
        for (var i = 0; i < raw_data.length; ++i){ 
         data.addColumn('number', raw_data[i][0]); 
        } 

        data.addRows(months.length); 

        for (var j = 0; j < months.length; ++j){ 
         data.setValue(j, 0, months[j]); 
        } 
        for (var i = 0; i < raw_data.length; ++i){ 
         for (var j = 1; j < raw_data[i].length; ++j){ 
          data.setValue(j-1, i+1, raw_data[i][j]); 
         } 
        } 
        /* 
         the $.template references all caused errors for me 
         so I removed them 
        */ 

        var div = $('#demo-chart'); 
        var divWidth = div.width(); 

        new google.visualization.LineChart(div.get(0)).draw(data, { 
         title: 'Monthly unique visitors count', 
         width: divWidth, 
         height: divHeight,/*$.template.mediaQuery.is('mobile') ? 180 : 265, */ 
         legend: 'right', 
         yAxis: {title: '(thousands)'}, 
         backgroundColor: '#494C50', 
         legendTextStyle: { color: 'white' }, 
         titleTextStyle: { color: 'white' }, 
         hAxis: { 
          textStyle: { color: 'white' } 
         }, 
         vAxis: { 
          textStyle: { color: 'white' }, 
          baselineColor: '#666666' 
         }, 
         chartArea: { 
          top: 35, 
          left: 30, 
          width: divWidth-40 
         }, 
         legend: 'bottom' 
        }); 

        if(chartInit) { 
         notify('Chart resized', 'The width change event has been triggered.', { 
          icon: 'img/demo/icon.png' 
         }); 
        } 
        chartInit = true; 
       }; 
      google.load('visualization', '1', { 
       'packages': ['corechart'] 
      }); 

      google.setOnLoadCallback(drawVisitorsChart); 

      /* This caused errors for me */ 
      /* $('#demo-chart').widthchange(drawVisitorsChart);*/ 

      $(document).on('respond-ready', drawVisitorsChart); 

     </script> 
    </head> 
    <body> 
     <div id='demo-chart' style='width:600px;height:400px;'></div> 
    </body> 
</html>

來源

2016-01-30 08:38:03 RamRaider

從MySQL PHP谷歌線型圖數據迴應

回答

相關問題