Question

我想用我的数据库中的数据创建一个图表折线图，但是当我尝试绘制它时，我有一个javascript错误：

chartist.min.js:8 Uncaught TypeError: Cannot read property

这是我的代码，

HTML页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Graphique Vitesse</title>
    <link rel="stylesheet" type="text/css" href="chartist.min.css"/>
    <script src="jquery.js"></script>
    <script src="chartist.min.js"></script>

    <script type="text/javascript">
        function test() {

            var c=0;
            var series = [];
              for (var i = 80; i < 81; ++i) {


                $.ajax({url: "test.php?id_cycliste="+i, success: function(result){
                  var i=0;
                  var ser = []

                      for (v of result){
                        alert("test1 " + v);
                        //alert("Salope"+v);
                        ser[i] = v.y;
                        ++i;
                        alert(1);
                      }
                      alert(2)
                      series[c] = ser;
                      ++c;
                                }});
                            //alert ("Tu va te prendre une calotte"+series.toString());
                            alert("test 2"+series.toString())

              //   $.ajax(("test.php?id_cycliste="+i), function (result) {
              //     var i=0;
              //     var ser = []
              //
              //     for (v of result){
              //       alert("Salope"+v);
              //       ser[i] = v.y;
              //       ++i;
              //       alert(1);
              //     }
              //     alert(2)
              //     series[c] = ser;
              //     ++c;
              //           })
              //           alert ("Tu va te prendre une calotte"+series.toString());
               }

              var options = {
    // Don't draw the line chart points
    showPoint: false,
    // Disable line smoothing
    lineSmooth: false,
    // X-Axis specific configuration
    axisX: {
      // We can disable the grid for this axis
      showGrid: false,
      // and also don't show the label
      showLabel: false
    },
    // Y-Axis specific configuration
    axisY: {
      // Lets offset the chart a bit from the labels
      offset: 60,
      // The label interpolation function enables you to modify the values
      // used for the labels on each axis. Here we are converting the
      // values into million pound.
      labelInterpolationFnc: function(value) {
        return '$' + value + 'm';
      }
    }
  };


              // var data = {labels,series}
              var data = {
  // A labels array that can contain any sort of values
labels : [0,2,4,6,8,10,12,14,16],
  // Our series array that contains series objects or in this case series data arrays
  series
};
              new Chartist.Line('.ct-chart', data, options);
            }
            test();

    </script>
</head>
<body>
  <h1> Bonjour </h1>
    <div class="ct-chart ct-perfect-fourth"></div>
    <div class="ct-chart"></div>
    <div id="graphVitesse" style="height: 350px;"></div>
</body>
</html>

PHP页面：

<?php

header('Content-Type: application/json');

$con = mysqli_connect("localhost","root","","veloinfospublic");

// Check connection

$id = $_GET["id_cycliste"];
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();
    $result = mysqli_query($con, "SELECT Temps,Vitesse FROM releve where cycliste_id=".$id);
    // var_dump ($result);

    // while($row = mysqli_fetch_array($result))
    // {
    //     $point = array("label" => $row['temps'] , "y" => $row['vitesse']);
    //     var_dump ($point);
    //
    //
    // }

    while ($row = $result->fetch_assoc()) {
        $point = array("label" => $row['Temps'] , "y" => $row['Vitesse']);
        array_push($data_points, $point);
    }
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);

?>

如果我去http://localhost/chartservice/test.php?id_cycliste=80 我有以下结果：

[{"label":0,"y":37},{"label":2,"y":35},{"label":4,"y":5},{"label":6,"y":11},{"label":8,"y":23},{"label":10,"y":33},{"label":12,"y":27},{"label":14,"y":37}]

但如果我转到HTML页面，我没有图形显示，我有以下JS错误：

chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of nullc.createSvg @ chartist.min.js:8d @ chartist.min.js:8h @ chartist.min.js:8

你找到了问题吗？你可以帮帮我吗？

由于

Answer 1

我已经解决了问题，我刚刚将脚本移到了正文后面像那样

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Graphique Vitesse</title>
    <link rel="stylesheet" type="text/css" href="chartist.min.css"/>
    <script src="jquery.js"></script>
    <script src="chartist.min.js"></script>
</head>
<body>
  <h1> Bonjour </h1>
    <div class="ct-chart ct-perfect-fourth"></div>
    <div class="ct-chart"></div>
    <div id="graphVitesse" style="height: 350px;"></div>
</body>

<script type="text/javascript">
    function test() {

        var c=0;
        var series = [];
          for (var i = 80; i < 81; ++i) {


            $.ajax({url: "test.php?id_cycliste="+i, success: function(result){
              var i=0;
              var ser = []

                  for (v of result){
                    alert("test1 " + v);
                    //alert("Salope"+v);
                    ser[i] = v.y;
                    ++i;
                    alert(1);
                  }
                  alert(2)
                  series[c] = ser;
                  ++c;
                            }});
                        //alert ("Tu va te prendre une calotte"+series.toString());
                        alert("test 2"+series.toString())

          //   $.ajax(("test.php?id_cycliste="+i), function (result) {
          //     var i=0;
          //     var ser = []
          //
          //     for (v of result){
          //       alert("Salope"+v);
          //       ser[i] = v.y;
          //       ++i;
          //       alert(1);
          //     }
          //     alert(2)
          //     series[c] = ser;
          //     ++c;
          //           })
          //           alert ("Tu va te prendre une calotte"+series.toString());
           }

          var options = {
// Don't draw the line chart points
showPoint: false,
// Disable line smoothing
lineSmooth: false,
// X-Axis specific configuration
axisX: {
  // We can disable the grid for this axis
  showGrid: false,
  // and also don't show the label
  showLabel: false
},
// Y-Axis specific configuration
axisY: {
  // Lets offset the chart a bit from the labels
  offset: 60,
  // The label interpolation function enables you to modify the values
  // used for the labels on each axis. Here we are converting the
  // values into million pound.
  labelInterpolationFnc: function(value) {
    return '$' + value + 'm';
  }
}
};


          // var data = {labels,series}
          var data = {
// A labels array that can contain any sort of values
labels : [0,2,4,6,8,10,12,14,16],
// Our series array that contains series objects or in this case series data arrays
series
};
          new Chartist.Line('.ct-chart', data, options);
        }
        test();

</script>
</html>

chartist Uncaught TypeError：无法读取属性

1 个答案: