ChartJS 图表不显示 - 折线图

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

      },


暮色呼如
浏览 339回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP