亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Google 折線圖不顯示使用 PHP 的 MySQL 查詢

Google 折線圖不顯示使用 PHP 的 MySQL 查詢

PHP
守候你守候我 2023-11-03 20:42:05
我正在努力在 Google 折線圖中使用 PHP 顯示 MySQL 查詢。問題是折線圖未顯示。我將感謝任何能夠為我指明正確方向的人。以下 MySQL 查詢是我試圖在折線圖中表示的內容：SELECT    DATE(`VISIT_TIME`) AS `Date`,    SUM(IF(HOUR(`VISIT_TIME`) = 0,    1,    0)) AS `TwelveAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 1,    1,    0)) AS `OneAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 2,    1,    0)) AS `TwoAM`,     SUM(IF(HOUR(`VISIT_TIME`) = 3,    1,    0)) AS `ThreeAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 4,    1,    0)) AS `FourAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 5,    1,    0)) AS `FiveAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 6,    1,    0)) AS `SixAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 7,    1,    0)) AS `SevenAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 8,    1,    0)) AS `EightAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 9,    1,    0)) AS `NineAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 10,    1,    0)) AS `TenAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 11,    1,    0)) AS `ElevenAM`,    SUM(IF(HOUR(`VISIT_TIME`) = 12,    1,    0)) AS `TwelvePM`,    SUM(IF(HOUR(`VISIT_TIME`) = 13,    1,    0)) AS `OnePM`,    SUM(IF(HOUR(`VISIT_TIME`) = 14,    1,    0)) AS `TwoPM`,    SUM(IF(HOUR(`VISIT_TIME`) = 15,    1,    0)) AS `ThreePM`,    SUM(IF(HOUR(`VISIT_TIME`) = 16,    1,    0)) AS `FourPM`,    SUM(IF(HOUR(`VISIT_TIME`) = 17,    1,    0)) AS `FivePM`,    SUM(IF(HOUR(`VISIT_TIME`) = 18,    1,    0)) AS `SixPM`,    SUM(IF(HOUR(`VISIT_TIME`) = 19,    1,    0)) AS `SevenPM`,    SUM(IF(HOUR(`VISIT_TIME`) = 20,    1,    0)) AS `EightPM`,    SUM(IF(HOUR(`VISIT_TIME`) = 21,    1,    0)) AS `NinePM`,    SUM(IF(HOUR(`VISIT_TIME`) = 22,    1,    0)) AS `TenPM`,    SUM(IF(HOUR(`VISIT_TIME`) = 23,    1,    0)) AS `ElevenPM`FROM    `jurl_analytics`WHERE    `URL_ID` = 'westonsupermare'GROUP BY    DATE(`VISIT_TIME`)LIMIT 7以下查詢顯示過去 7 天內每小時的請求數。https://i.stack.imgur.com/SKN7v.png 我希望在 Google 折線圖中表示這些數據，如下圖所示：https://i.stack.imgur.com/svqqi.png 這是我嘗試過的： //如果您決定創建數據庫，請填寫服務器、用戶名、密碼和數據庫字段。
查看完整描述

1 回答

?
眼眸繁星

TA貢獻1873條經驗 獲得超9個贊

這里有一些問題。

首先，列標題中有 25 個值...

['Date', 'TwelveAM', 'OneAM', 'TwoAM', ...

但行數據中有 26 個值...

echo "['".$result['Date']."',".$result['TwelveAM']."','".$result['OneAM']."' ...

有兩個TwelvePM值，我們將刪除最后一個值，
因為它與最后一個列標題不匹配。

接下來，正如您在評論中提到的，逗號和撇號的數量
可能會令人困惑。 這是您不應嘗試手動構建 JSON 的原因之一。

相反，在 PHP 中構建數組，然后在寫入頁面時對 JSON 進行編碼。

<?php

  $data = array();

  $data[] = ['Date', 'TwelveAM', 'OneAM', 'TwoAM', 'ThreeAM', 'FourAM', 'FiveAM', 'SixAM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM'];


  $fire = mysqli_query($connect, $sevenDaysHours);

  while($result = mysqli_fetch_assoc($fire))

  {

    $data[] = [$result['Date'], $result['TwelveAM'], $result['OneAM'], $result['TwoAM'], $result['ThreeAM'], $result['FourAM'], $result['FiveAM'], $result['SixAM'], $result['SevenAM'], $result['EightAM'], $result['NineAM'], $result['TenAM'], $result['ElevenAM'], $result['TwelvePM'], $result['OnePM'], $result['TwoPM'], $result['ThreePM'], $result['FourPM'], $result['FivePM'], $result['SixPM'], $result['SevenPM'], $result['EightPM'], $result['NinePM'], $result['TenPM'], $result['ElevenPM']];

  }

?>


google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);


function drawChart() {

  var data = google.visualization.arrayToDataTable(<?php echo json_encode($data); ?>);


  var options = {

    title: 'Company Performance',

    curveType: 'function',

    legend: { position: 'bottom' }

  };


  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));


  chart.draw(data, options);

}

這是您正在尋找的部分...


<?php

  $server = "";

  $username = "";

  $password = "";

  $database = "";

  $connect = mysqli_connect($server,$username,$password,$database);

  if ($connect)

  {

      echo "You are connected!". "<br>";

  }


  function runAndCheckSQL($connection, $sql){

    $run = mysqli_query($connection, $sql);

    if ($run) {

        if(is_array($run) || is_object($run)){


            return $run;

        }else{

            return true;

        }

    } else {

        die(showError($sql, $connection));

    }

  }


  $sevenDaysHours = "SELECT

    DATE(`VISIT_TIME`) AS `Date`,

    SUM(IF(HOUR(`VISIT_TIME`) = 0,

    1,

    0)) AS `TwelveAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 1,

    1,

    0)) AS `OneAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 2,

    1,

    0)) AS `TwoAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 3,

    1,

    0)) AS `ThreeAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 4,

    1,

    0)) AS `FourAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 5,

    1,

    0)) AS `FiveAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 6,

    1,

    0)) AS `SixAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 7,

    1,

    0)) AS `SevenAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 8,

    1,

    0)) AS `EightAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 9,

    1,

    0)) AS `NineAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 10,

    1,

    0)) AS `TenAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 11,

    1,

    0)) AS `ElevenAM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 12,

    1,

    0)) AS `TwelvePM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 13,

    1,

    0)) AS `OnePM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 14,

    1,

    0)) AS `TwoPM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 15,

    1,

    0)) AS `ThreePM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 16,

    1,

    0)) AS `FourPM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 17,

    1,

    0)) AS `FivePM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 18,

    1,

    0)) AS `SixPM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 19,

    1,

    0)) AS `SevenPM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 20,

    1,

    0)) AS `EightPM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 21,

    1,

    0)) AS `NinePM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 22,

    1,

    0)) AS `TenPM`,

    SUM(IF(HOUR(`VISIT_TIME`) = 23,

    1,

    0)) AS `ElevenPM`

  FROM

    `jurl_analytics`

  WHERE

    `URL_ID` = 'westonsupermare'

  GROUP BY

    DATE(`VISIT_TIME`)

  LIMIT 7"

?>

<html>

<head>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">


  <?php

    $data = array();

    $data[] = ['Date', 'TwelveAM', 'OneAM', 'TwoAM', 'ThreeAM', 'FourAM', 'FiveAM', 'SixAM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM'];


    $fire = mysqli_query($connect, $sevenDaysHours);

    while($result = mysqli_fetch_assoc($fire))

    {

      $data[] = [$result['Date'], $result['TwelveAM'], $result['OneAM'], $result['TwoAM'], $result['ThreeAM'], $result['FourAM'], $result['FiveAM'], $result['SixAM'], $result['SevenAM'], $result['EightAM'], $result['NineAM'], $result['TenAM'], $result['ElevenAM'], $result['TwelvePM'], $result['OnePM'], $result['TwoPM'], $result['ThreePM'], $result['FourPM'], $result['FivePM'], $result['SixPM'], $result['SevenPM'], $result['EightPM'], $result['NinePM'], $result['TenPM'], $result['ElevenPM']];

    }

  ?>


  google.charts.load('current', {'packages':['corechart']});

  google.charts.setOnLoadCallback(drawChart);


  function drawChart() {

    var data = google.visualization.arrayToDataTable(<?php echo json_encode($data); ?>);


    var options = {

      title: 'Company Performance',

      curveType: 'function',

      legend: { position: 'bottom' }

    };


    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));


    chart.draw(data, options);

  }


</script>

</head>

<body>

  <div id="curve_chart" style="width: 900px; height: 500px"></div>

</body>

</html>

編輯


如果數字值在 PHP 中表現為字符串，

則嘗試將JSON_NUMERIC_CHECK參數添加到編碼語句中。


<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>

讓我們將 JSON 數據分配給它自己的變量。

然后我們可以將結果發送到控制臺進行檢查。

如果仍然不起作用，請分享控制臺的示例。


<?php

  $data = array();

  $data[] = ['Date', 'TwelveAM', 'OneAM', 'TwoAM', 'ThreeAM', 'FourAM', 'FiveAM', 'SixAM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM'];


  $fire = mysqli_query($connect, $sevenDaysHours);

  while($result = mysqli_fetch_assoc($fire))

  {

    $data[] = [$result['Date'], $result['TwelveAM'], $result['OneAM'], $result['TwoAM'], $result['ThreeAM'], $result['FourAM'], $result['FiveAM'], $result['SixAM'], $result['SevenAM'], $result['EightAM'], $result['NineAM'], $result['TenAM'], $result['ElevenAM'], $result['TwelvePM'], $result['OnePM'], $result['TwoPM'], $result['ThreePM'], $result['FourPM'], $result['FivePM'], $result['SixPM'], $result['SevenPM'], $result['EightPM'], $result['NinePM'], $result['TenPM'], $result['ElevenPM']];

  }

?>


var jsonData = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;

console.log(JSON.stringify(jsonData));


google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);


function drawChart() {

  var data = google.visualization.arrayToDataTable(jsonData);


  var options = {

    title: 'Company Performance',

    curveType: 'function',

    legend: { position: 'bottom' }

  };


  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));


  chart.draw(data, options);

}

編輯2


為了獲得所需的圖表，

我們需要將列換成行，反之亦然。

這很可能很難通過更改查詢來實現。

但我們可以輕松地用 JavaScript 創建一個新的數據表。


所以，幾乎讓一切保持不變。

除了我們將添加以下例程來創建一個新的數據表，

并交換列和行。

然后使用新的數據表繪制圖表。


var jsonData = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;


google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);


function drawChart() {

  var data = google.visualization.arrayToDataTable(jsonData);


  // create new data table with columns and rows swapped

  var dataHours = new google.visualization.DataTable();

  dataHours.addColumn('number', 'Hour');

  for (var row = 0; row < data.getNumberOfRows(); row++) {

    var dateColumn = dataHours.addColumn('number', data.getValue(row, 0));

    for (var col = 1; col < data.getNumberOfColumns(); col++) {

      var dateRow = dataHours.addRow();

      dataHours.setValue(dateRow, 0, col);

      dataHours.setValue(dateRow, dateColumn, data.getValue(row, col));

    }

  }


  var options = {

    title: 'Company Performance',

    curveType: 'function',

    legend: { position: 'bottom' }

  };


  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));


  chart.draw(dataHours, options);  // <-- draw chart with new data table

}

以下是一個工作示例，顯示了交換之前和之后......


google.charts.load('current', {

  packages:['corechart']

}).then(function () {

  var data = google.visualization.arrayToDataTable([

    ['Date', 'TwelveAM', 'OneAM', 'TwoAM', 'ThreeAM', 'FourAM', 'FiveAM', 'SixAM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM'],

    ['2020-08-14', 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],

    ['2020-08-15', 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50],

    ['2020-08-16', 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54, 57, 60, 63, 66, 69, 72, 75],

    ['2020-08-17', 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100]

  ]);


  // create new data table with columns and rows swapped  

  var dataHours = new google.visualization.DataTable();

  dataHours.addColumn('number', 'Hour');

  for (var row = 0; row < data.getNumberOfRows(); row++) {

    var dateColumn = dataHours.addColumn('number', data.getValue(row, 0));

    for (var col = 1; col < data.getNumberOfColumns(); col++) {

      var dateRow = dataHours.addRow();

      dataHours.setValue(dateRow, 0, col);

      dataHours.setValue(dateRow, dateColumn, data.getValue(row, col));

    }

  }


  var options = {

    chartArea: {

      left: 64,

      top: 48,

      right: 32,

      bottom: 64,

      height: '100%',

      width: '100%'

    },

    height: '100%',

    legend: {

      alignment: 'center',

      position: 'bottom'

    },

    width: '100%'

  };


  var chartBefore = new google.visualization.LineChart(document.getElementById('chart_before'));

  chartBefore.draw(data, options);


  var chartAfter = new google.visualization.LineChart(document.getElementById('chart_after'));

  chartAfter.draw(dataHours, options);

});

.chart {

  height: 260px;

}

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div class="chart" id="chart_before"></div>

<div class="chart" id="chart_after"></div>


查看完整回答
反對 回復 2023-11-03
  • 1 回答
  • 0 關注
  • 139 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號