Chart.js 未显示折线图。 我究竟做错了什么？

Question

我正在尝试显示此折线图，但它不起作用； 我应该在 2 个月的时间间隔内用 covid 数据的结果制作图表，所以在 x assys 中会有几天，而在 y assys 中会有病例数和死亡数。

**<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>My Chart.js Chart</title>
</head>
<body>

    <div class="container">
        <canvas id="myChart" width="720" height="360"></canvas>
    </div>

    <script>
        let myChart = (document.getElementById('myChart').getContext('2d'));
        let myCovidChart = new Chart(myChart, {
            type: 'line', 
            data:{
                labels:['16-marzo', '17-marzo', '18-marzo', '19-marzo', '20-marzo', '21-marzo', '22-marzo', '23-marzo', '24-marzo', '25-marzo', '26-marzo', '27-marzo', '28-marzo', '29-marzo', '30-marzo', '31-marzo', '1-aprile', '2-aprile', '3-aprile', '4-aprile', '5-aprile', '6-aprile', '7-aprile', '8-aprile', '9-aprile', '10-aprile', '11-aprile', '12-aprile', '13-aprile', '14-aprile', '15-aprile', '16-aprile', '17-aprile', '18-aprile', '19-aprile', '20-aprile', '21-aprile', '22-aprile', '23-aprile', '24-aprile', '25-aprile', '26-aprile', '27-aprile', '28-aprile', '29-aprile', '30-aprile'],
                data:[{
                    data:[0, 5589, 6872, 8140, 9424, 10590, 11799, 12869, 14619, 16110, 17509, 18486, 20197, 22829, 24782, 26578, 28918, 31135, 33431, 36547, 38638, 40638, 43306, 46927, 51311, 55548, 60271, 65391, 69003, 71615, 74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109],
                    label: 'Cumulativo Tamponi',
                    borderColor:'green'

                },{
                    data:[1516, 2063, 2659, 3017, 3576, 4059, 4541, 5094, 5767, 6193, 6708, 7228, 7920, 8461, 8835, 9418, 9918, 10466, 11082, 11839, 12442, 13046, 13434, 13964, 14671, 15412, 16109, 16733, 17246, 17773, 18446, 19261, 19954, 20581, 21144, 21437, 22149, 22854, 23319, 24050, 24549, 24910, 25216, 25538, 25995, 26453],
                    label: 'Numero Contagiati'
                    

                }]
            },
            options:{
                display: true
            }
        });
    </script>**

Answer 1

将labels字段下的data字段名称更改为数据datasets

例子：

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>My Chart.js Chart</title> </head> <body> <div class="container"> <canvas id="myChart" width="720" height="360"></canvas> </div> <script> let myChart = (document.getElementById('myChart').getContext('2d')); let myCovidChart = new Chart(myChart, { type: 'line', data: { labels: ['16-marzo', '17-marzo', '18-marzo', '19-marzo', '20-marzo', '21-marzo', '22-marzo', '23-marzo', '24-marzo', '25-marzo', '26-marzo', '27-marzo', '28-marzo', '29-marzo', '30-marzo', '31-marzo', '1-aprile', '2-aprile', '3-aprile', '4-aprile', '5-aprile', '6-aprile', '7-aprile', '8-aprile', '9-aprile', '10-aprile', '11-aprile', '12-aprile', '13-aprile', '14-aprile', '15-aprile', '16-aprile', '17-aprile', '18-aprile', '19-aprile', '20-aprile', '21-aprile', '22-aprile', '23-aprile', '24-aprile', '25-aprile', '26-aprile', '27-aprile', '28-aprile', '29-aprile', '30-aprile'], datasets: [{ data: [0, 5589, 6872, 8140, 9424, 10590, 11799, 12869, 14619, 16110, 17509, 18486, 20197, 22829, 24782, 26578, 28918, 31135, 33431, 36547, 38638, 40638, 43306, 46927, 51311, 55548, 60271, 65391, 69003, 71615, 74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109], label: 'Cumulativo Tamponi', borderColor: 'green' }, { data: [1516, 2063, 2659, 3017, 3576, 4059, 4541, 5094, 5767, 6193, 6708, 7228, 7920, 8461, 8835, 9418, 9918, 10466, 11082, 11839, 12442, 13046, 13434, 13964, 14671, 15412, 16109, 16733, 17246, 17773, 18446, 19261, 19954, 20581, 21144, 21437, 22149, 22854, 23319, 24050, 24549, 24910, 25216, 25538, 25995, 26453], label: 'Numero Contagiati' }] }, options: { display: true } }); </script>