ChartJS 图表不显示 - 折线图答案

【问题标题】：ChartJS graph not displaying - line graphChartJS 图表不显示 - 折线图
【发布时间】：2019-07-02 10:55:40
【问题描述】：

我正在尝试让 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>

【问题讨论】：

不看数据集就很难判断。回复中的data 是什么样的？是敏感数据吗？看到它可能有助于建立一个证明问题的minimal, reproducible example。
感谢您的回复，我复制了如下所示的数据 - [{"0":"1","user_id":"1","1":"3","pain ":"3","2":"3","睡眠":"3","3":"3","心情":"3","4":"32","心率": "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","睡眠":"3","3":"3","心情": "3","4":"32","心率":"32","5":"2019-06-20 09:52:53","time_of_entry":"2019-06-20 09:52 :53"},{"0":"1","user_id":"1","1":"2","pain":"2","2":"23","sleep": "23","3":"3","心情":"3","4":"89","心率":"89","5":"2019-06-20 09:53: 20","time_of_entry":"2019-06-20 09:53:20"},

标签： javascript php json chart.js

【解决方案1】：

第 1 步 - json 数据错误使用JSON Validator 来检查。

这是正确的 json 数据。 [{"0":"1","user_id":"1","1":"3","pain":"3","2":"3","sleep":"3", "3":"3","心情":"3","4":"32","心率":"32","5":"2019-06-20 09:52:43"," time_of_entry":"2019-06-20 09:52:43"},{"0":"1","user_id":"1","1":"3","pain":"3", "2":"3","睡眠":"3","3":"3","心情":"3","4":"32","心率":"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","heartrate":"89","5":"2019-06-20 09:53:20","time_of_entry":"2019-06-20 09:53:20"}]

第 2 步- 解析 json 数据然后使用。它会起作用的。

附上截图。 https://www.screencast.com/t/6t4r6hqMTw

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

    -------

【讨论】：

我试过了，但它仍然显示一个空白屏幕 - 你知道为什么会发生这种情况吗？感谢您的回复
删除这两个文件 - 。这很矛盾。
谢谢你我把那些拿出来了。出于某种原因，它没有显示在网页上，但我可以看到它正在你的屏幕截图上工作
@emwonderland2828 您的 json 数据不正确。我更新了答案，请检查。
太棒了。很高兴为您提供帮助。:)