从 JQUERY/AJAX 到 Morris.JS 的数据

Question

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

带有数据的可变数据图表return。但是 morris.js 图 return 没有 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) 你有一个对象列表，但为了成为一个有效的列表（或通常所说的 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 中出现意外语法错误（例如，想象你的一个字符串值本身包含一个双引号：如果你没有在它前面使用合适的转义字符，那么在 JSON 中它看起来像属性的结尾，然后是后面的内容无效）。

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

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

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

希望您现在看到了整体模式 - 您使用 PHP 变量并将其转换为 JSON，这是数据的文本表示。这使您可以通过 Internet 发送它。然后当它到达目的地时，您再次将其变回 (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/

从 JQUERY/AJAX 到 Morris.JS 的数据

Data from JQUERY/AJAX to Morris.JS

javascript

ajax

jquery

json

morris.js