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

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 "中添加了空间。 这就是为什么您会得到一个错误。

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

您可以使用在加载整个页面时触发的onload方法。

喜欢：

   window.onload = function(){

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

   }

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

问题描述

1 个解决方案

解决方案1
0 2019-11-27 13:36:56

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

问题描述

1 个解决方案

解决方案1 0 2019-11-27 13:36:56

解决方案1
0 2019-11-27 13:36:56