從 JQUERY/AJAX 到 Morris.JS 的數據

Question

我正在嘗試將數據從 AJAX/JQUERY 導出到 Morris.JS。

可變數據圖表返回數據。 但 morris.js 圖不返回 Line/bar

            $("#diseaseselection").change(function(){
                $("#chart").empty();
                var diseaseselection = $("#diseaseselection").val();
                $.ajax({
                    url: "chart.php",
                    method: "POST",                   
                    data: {
                        diseaseselection: diseaseselection
                    },
                    success: function(data) {
                        Morris.Line({
                            element : 'chart',
                            data:[data],
                            xkey:'age',
                            ykeys:[ 'totalM', 'totalF'],
                            labels:['Total MALE', 'Total FEMALE'],
                            hideHover:'auto',
                            pointStrokeColors: ['white'],
                            lineWidth:'6px',
                            parseTime: false,
                            lineColors: ['Skyblue', 'Pink'],
                        });
                    }

                });
            });

這是我的示例 PHP 代碼請幫助我如何弄清楚我非常需要它，非常感謝。 已經盡力了

$diseaseselection = $_REQUEST['diseaseselection'];

if(isset($diseaseselection)){ 
   $result = mysqli_query($con, "SELECT disease,age,SUM(CASE WHEN gender = 'm' THEN 1 ELSE 0 END) AS totalM, SUM(CASE WHEN gender = 'f' THEN 1 ELSE 0 END) AS totalF FROM mdr where disease = '$diseaseselection' GROUP BY disease , age"); 
   $chart_data = ''; 

while($row = mysqli_fetch_array($result)) { 
      $chart_data .= "{ age:'".$row["age"]."', totalM:".$row["totalM"].", totalF:".$row["totalF"]."}, "; 
} 
$chart_data = substr($chart_data, 0, -2); 
echo $chart_data; }

這是我的示例輸出這是基於我的控制台日志 console.log(data); 請幫助我如何弄清楚我非常需要它，非常感謝。 已經盡力了

{ age:'0-1', totalM:2, totalF:1},

{ age:'1-4', totalM:1, totalF:0},

{ age:'10-14', totalM:0, totalF:1},

{ age:'15-19', totalM:0, totalF:1},

{ age:'5-9', totalM:0, totalF:3},

{ age:'55-59', totalM:6, totalF:0}

Answer 1

這里有許多小問題，它們都與同一個關鍵問題有關 - 您的 PHP 生成的不是有效的 JSON 數據。

如果您將示例數據復制並粘貼到JSONLint等驗證器中，您會發現它在以下幾種情況下會失敗：

1) 你有一個對象列表，但為了成為一個有效的列表（或數組，正如它通常所知），這些項目必須在開始和結束時用方括號（ [和] ）括起來。

2) 屬性名稱（例如age、totalM 和totalF）必須用雙引號( " ) 括起來。

3) 字符串值（例如 0-1、1-4 等）周圍必須有雙引號，而不是單引號。

示例 JSON 的有效版本如下所示：

[
  { "age": "0-1", "totalM": 2, "totalF": 1 }, 
  { "age": "1-4", "totalM": 1, "totalF": 0 }, 
  { "age": "10-14", "totalM": 0, "totalF": 1 }, 
  { "age": "15-19", "totalM": 0, "totalF": 1 }, 
  { "age": "5-9", "totalM": 0, "totalF": 3 }, 
  { "age": "55-59", "totalM": 6, "totalF": 0 }
]

您可能會發現本教程作為一種快速學習語法的方法很有用。

但是，雖然了解語法很有用，但實際上您不必像現在一樣通過 PHP 手動創建它。 事實上，這樣做是一個非常糟糕的主意，因為它讓你容易犯愚蠢的錯誤（比如沒有添加方括號），並且有在 JSON 中出現意外語法錯誤的風險（例如想象你的一個字符串值本身包含一個雙-quote mark：如果你沒有在它前面使用合適的轉義字符，那么在 JSON 中它看起來像屬性的結尾，后面的內容將是無效的）。

上述問題的結果是您的 PHP 將一串無效數據返回給瀏覽器，並且無法用於填充圖表。

最好在 PHP 中簡單地構造一個普通數組，然后使用內置的json_encode()函數來處理將該對象轉換為有效的 JSON。 這通常被認為是最佳實踐，如果您遵循任何介紹性 PHP/JSON 教程，它將向您展示此功能。

為了增加創建 JSON 服務器端的問題，還有一個客戶端問題：即使您確實返回了有效的 JSON，此時它仍然是一個字符串 - 為了在您的圖表中使用它，您將擁有將其解析為 JavaScript 變量。 如果您在$.ajax選項中指定dataType: "json" ，jQuery 將自動為您解析。 否則，您將調用JSON.parse()來執行此操作。

希望您現在看到了整體模式 - 您將一個 PHP 變量轉換為 JSON，它是數據的文本表示。 這允許您通過互聯網發送它。 然后，當它到達目的地時，您將其再次轉換回（JavaScript）變量以在代碼中使用。

這是一些示例 PHP，它將以推薦的方式生成有效的 JSON。 我在重要的行添加了評論：

$diseaseselection = $_REQUEST['diseaseselection'];

if(isset($diseaseselection)){ 
   $result = mysqli_query($con, "SELECT disease,age,SUM(CASE WHEN gender = 'm' THEN 1 ELSE 0 END) AS totalM, SUM(CASE WHEN gender = 'f' THEN 1 ELSE 0 END) AS totalF FROM mdr where disease = '$diseaseselection' GROUP BY disease , age"); 
   $chart_data = array(); //declare an array, not a string. This will become the outer array of the JSON.

  while($row = mysqli_fetch_array($result)) { 
      //add a new item to the array
      //each new item is an associative array with key-value pairs - this will become an object in the JSON
      $chart_data [] = array(
        "age" => $row["age"], 
        "totalM" => $row["totalM"], 
        "totalF" => $row["totalF"]
      ); 
  } 

  $json = json_encode($chart_data);  //encode the array into a valid JSON object
  echo $json; //output the JSON
}

這是接收它的 JavaScript 代碼的相關部分

$.ajax({
  url: "chart.php",
  method: "POST",
  data: {
    diseaseselection: diseaseselection
  },
  dataType: "json", //parse the response data as JSON automatically
  success: function(data) {
    Morris.Line({
      element: 'chart',
      data: data, //supply the response data (which is now a JS variable) directly, no extra brackets
      xkey: 'age',
      ykeys: ['totalM', 'totalF'],
      labels: ['Total MALE', 'Total FEMALE'],
      hideHover: 'auto',
      pointStrokeColors: ['white'],
      lineWidth: '6px',
      parseTime: false,
      lineColors: ['Skyblue', 'Pink'],
    });
  }
});

這是 AJAX 和圖表部分的工作演示（使用虛擬服務器提供 JSON）： https : //jsfiddle.net/7o9ptajr/1/