Question

我的HTML代码如下

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Ticket Overdue Pie Chart </h5>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas id="dnghclp " height="140"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我在网页上使用chartjs图表。它在html页面上正常工作。但是，当我将它们加载到php页面的服务器中时，那里没有显示任何图形。我有两个图，一个是直线，另一个是带有以下代码的条形图。

var pendchart1 = {
  labels: ["Client","User"],
  datasets: [{
  data: [3,6],
  backgroundColor: 
  ["#e580ff","#ccf2ff","#f0b3ff","#ff704d","#ffff4d"]
}]
} ;
 var doughnpending = {
   responsive: true
 };
  var ctx6 = document.getElementById("dnghclp").getContext("2d");//here error 'getContext' of null
      new Chart(ctx6, {type: 'doughnut', data: pendchart1, options:doughnpending});

Answer 1

您在html的画布ID属性"dnghclp "中添加了空格。这就是为什么您会得到一个错误。

还应该在getElementById准备好后调用DOM方法。

您可以使用onload方法，该方法会在整个页面加载完毕后触发。

赞：

   window.onload = function(){

    var ctx6 = document.getElementById("dnghclp").getContext("2d");
    new Chart(ctx6, {type: 'doughnut', data: pendchart1, options:doughnpending});

   }

甜甜圈图的图表js在HTML页面上不起作用

1 个答案: