Question

我正在尝试让ChartJS折线图适用于我正在从事的项目。我遵循了一个教程，因为我需要从mySQL数据库中获取数据并使用此数据显示在折线图上。我想知道是否有人有使用ChartJS的经验，请告诉我我的代码有什么问题。

我出于隐私原因删除了指向JSON数据的网络链接，但数据以JSON格式显示。

<!DOCTYPE html>
<html>
  <head>
    <title>ChartJS - LineGraph</title>
     <style>
      .chart-container {
       width: 640px;
       height: auto;
    }
    </style>
    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/linegraph.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>


 </head>
 <body>

   <div class="chart-container">
     <canvas id="mycanvas" width="600" height="600"></canvas>
       <script>
         $(document).ready(function(){
          $.ajax({
         url : "**********",
        type : "GET",
       success : function(data){
       console.log(data);

        var user_id = [];
        var pain = [];
        var sleep = [];
        var mood = [];
        var heartrate = [];
        var time_of_entry = [];


        for(var i in data) {
         user_id.push("UserID " + data[i].user_id);
         pain.push(data[i].pain);
         sleep.push(data[i].sleep);
         mood.push(data[i].mood);
         heartrate.push(data[i].heartrate);
         time_of_entry.push(data[i].timeofentry);

           }

          var chartdata = {
          labels: user_id,
          datasets: [
          {
        label: "pain",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(59, 89, 152, 0.75)",
        borderColor: "rgba(59, 89, 152, 1)",
        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
        data: pain
      },
      {
        label: "sleep",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(29, 202, 255, 0.75)",
        borderColor: "rgba(29, 202, 255, 1)",
        pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
        pointHoverBorderColor: "rgba(29, 202, 255, 1)",
        data: sleep
      },
      {
        label: "mood",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(211, 72, 54, 0.75)",
        borderColor: "rgba(211, 72, 54, 1)",
        pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
        pointHoverBorderColor: "rgba(211, 72, 54, 1)",
        data: mood
      },
      {
        label: "heartrate",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(211, 72, 54, 0.75)",
        borderColor: "rgba(211, 72, 54, 1)",
        pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
        pointHoverBorderColor: "rgba(211, 72, 54, 1)",
        data: heartrate
      },
      {
        label: "time_of_entry",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(211, 72, 54, 0.75)",
        borderColor: "rgba(211, 72, 54, 1)",
        pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
        pointHoverBorderColor: "rgba(211, 72, 54, 1)",
        data: time_of_entry
      }
    ]
  };



  var ctx = $("#mycanvas");

  var mycanvas = new Chart(ctx, {
    type: 'line',
    data: chartdata
  });
},
error : function(data) {

   }
  });
});
</script>
</div>

 </body>

Answer 1

步骤1 -json数据错误，请使用JSON Validator进行检查。

这是正确的json数据。 [{{“ 0”：“ 1”，“ user_id”：“ 1”，“ 1”：“ 3”，“疼痛”：“ 3”，“ 2”：“ 3”，“睡眠”：“ 3”， “ 3”：“ 3”，“ mood”：“ 3”，“ 4”：“ 32”，“ heartrate”：“ 32”，“ 5”：“ 2019-06-20 09:52:43”，“ time_of_entry“：” 2019-06-20 09:52:43“}，{” 0“：” 1“，” user_id“：” 1“，” 1“：” 3“，”疼痛“：” 3“， “ 2”：“ 3”，“ sleep”：“ 3”，“ 3”：“ 3”，“ mood”：“ 3”，“ 4”：“ 32”，“ heartrate”：“ 32”，“ 5 “：” 2019-06-20 09:52:53“，” time_of_entry“：” 2019-06-20 09:52:53“}，{” 0“：” 1“，” user_id“：” 1“， “ 1”：“ 2”，“疼痛”：“ 2”，“ 2”：“ 23”，“睡眠”：“ 23”，“ 3”：“ 3”，“情绪”：“ 3”，“ 4 “：” 89“，”心率“：” 89“，” 5“：” 2019-06-20 09:53:20“，” time_of_entry“：” 2019-06-20 09:53:20“}] < / p>

步骤2 -解析json数据，然后使用。它会工作。

附加了屏幕截图。 https://www.screencast.com/t/6t4r6hqMTw

  $(document).ready(function(){
              $.ajax({
             url : "**********",
            type : "GET",
        success : function(data){
        data = jQuery.parseJSON( data);

    -------

ChartJS图形不显示-折线图

1 个答案: