通过Visual Code的Chart.js不显示图形

编程问答 2022-08-16

问题描述

如何在此Covid-19仪表板上显示script.js图？对于我的，它仅显示单词。我尝试了几次尝试，以使script.js在网络上显示图形，其中包括将<link rel>放在标题而不是正文中。

什么可能的原因可能导致此问题？

index.html文件 

    <!DOCTYPE HTML>
    <html>
        <head>
            <script src="script.js"></script>
            <title>Malaysia COVID-19 for march 2020</title>
            <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"> </script>
            <link rel = "stylesheet" typr = "text/css" href = "style.css">
            
        </head>
        <body>
            <div class = "wrapper">
                <h1>Malaysia COVID-19 Cases</h1>
                <h2>A simple line chart using Chart.js</h2>
    
                <canvas id = "mychart" width = "1600" heights = "900"></canvas>
            </div>
        </body>
    </html>

script.js文件 

//For drawing the lines
var confirmed = [566,673,790,900,1030,1183,1306,1518,1624,1796,2031];
var recovered = [42,49,60,75,87,114,139,183,199,215];
var death = [0,2,3,4,10,14,16,20,23];

var ctx = document.getElementById("mychart");

var mychart = new Chart(ctx,{
    type : 'line',data : {
        labels : day,datasets: [
            {
                data: confirmed,label : "Confirmed Cases",borderColor: "#4933FF",fill: false
            },{
                data: recovered,label : "Recovered Cases",borderColor: "#00FF0C",{
                data: death,label : "Death Cases",fill: false
            }
        ]
        }
});

解决方法

您需要将脚本放在CDN之后，否则对象Chart尚未定义。

 <script src="cdn/chart.js"></script>
 <script>Your stuff</script>

脚本应位于正文末尾，您可以使用开发人员工具中的控制台获取有关错误的信息。

,

我找到了解决此问题的方法。它与script标记的位置无关，而是要从chart.min.js中删除最小值。就像这样：

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>

然后它将显示图形。

frontendgraphgraphgraphhtmljavascript