从 JQUERY/AJAX 到 Morris.JS 的数据

Question

我正在尝试将数据从 AJAX/JQUERY 导出到 Morris.JS。

变量数据图表返回数据。但 morris.js 图表不返回线/条

            $("#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) 你有一个对象列表，但是为了成为一个有效的列表（或 array，因为它通常是已知的），这些项目必须用方括号括起来（[和]) 在开头和结尾。

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

您可能会发现this tutorial 是一种快速学习语法的有用方法。

但是，尽管了解语法很有用，但您实际上不必像现在这样通过 PHP 手动创建它。事实上，这样做是一个非常糟糕的主意，因为它会让你容易犯愚蠢的错误（比如不添加方括号），并且有可能在 JSON 中出现意外的语法错误（例如，想象你的一个字符串值本身包含一个 double -引号：如果你没有在它前面使用合适的转义字符，那么在 JSON 中它看起来像属性的结尾，那么后面的内容就会无效）。

上述问题的结果是您的 PHP 将一串无效数据返回给浏览器，并且不能用于填充图表。

最好在 PHP 中简单地构造一个普通数组，然后使用内置的json_encode() 函数将该对象转换为有效的 JSON。这通常被认为是最佳实践，如果您遵循任何介绍性 PHP/JSON 教程，它将向您展示此功能。

除了创建 JSON 服务器端的问题之外，还有一个客户端问题：即使您确实返回了有效的 JSON，此时它仍然是一个字符串 - 为了它要在图表中使用，您必须将其解析为 JavaScript 变量。如果您在$.ajax 选项中指定dataType: "json"，jQuery 将自动为您进行解析。否则，您将致电 JSON.parse() 进行操作。

希望您现在看到整体模式 - 您将 PHP 变量转换为 JSON，这是数据的文本表示。这允许您通过 Internet 发送它。然后，当它到达目的地时，您将其重新转换为（JavaScript）变量以在代码中使用。

这里有一些示例 PHP，它将以推荐的方式生成有效的 JSON。我在重要行添加了 cmets：

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