Javascript 如何使用css网格编写4个图表（尝试使用chart.js）

我试图用chart.js编写4个图表，并将它们表示在一个网格（2x2）中。所以我一共有4张图表，两张相邻

是否可以在css网格中实现chart.js？我已经用编写了一个chart.js，但是如果我把它放在网格框中，它似乎不会显示

是否有人拥有图表布局的经验，是否有比chart.js更好/更简单的方法编写图表

谢谢

这是我的html和我的div：

<div class="chartdivs">
        <!--chart1-->
        <div class="chart1">
            <canvas id="lineCharts" height="160" width="400"></canvas>
        </div>
        <!--chart2-->
        <div class="chart2">
            
        </div>
        <!--chart3-->
        <div class="chart3">
            
        </div>
        <!--chart4-->
        <div class="chart4">
            
        </div>
    </div>

---

我很确定你的CSS中有一些拼写错误：

/*这里缺少一个点*/
沙特迪夫{
高度：100vh；
显示：网格；
/*“1”后面的空格太多*/
网格模板柱：1个fr 1fr；
网格模板行：1fr 1fr；
网格模板区域：
“第1箱第2箱”
“第三箱第四箱”；
}

请参见下面的工作示例

var myChartObject=document.getElementById（“线条图”）；
var图表=新图表（myChartObject{
键入：“行”，
数据：{
标签：[“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“一月”]，
数据集：[{
标签：“新冠病毒病例总数”，
背景颜色：“rgba（34,49,63,1）”，
边框颜色：“rgba（34,49,63,1）”，
数据：[1916605295863084531714352324217753282154251327072452296492832]，
}]
}
});
.chartdivs{
高度：100vh；
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
网格模板区域：
“第1箱第2箱”
“第三箱第四箱”；
}
.图表1{
网格区域：框1；
}
.图表2{
网格区域：框2；
}
.图表3{
网格区域：框3；
}
.图表4{
网格区域：框4；
}
我现在已经完成了所有4个图表，但我的css代码没有将它们放入2x2网格中。我还纠正了你提到约瑟夫的错误

 .chartdivs{
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "box1 box2"
    "box3 box4";
    
}



.myFirstChart{
    grid-area: box1;
}
.mySecondChart{
    grid-area: box2;
}
.myThirdChart{
    grid-area: box3;
}
.myFourthChart{
    grid-area: box4;
}

我的4个图表在下面相互表示。还有什么我可以尝试的吗？
请至少提供一些代码，以便我们提供帮助。我们不是来为您编写代码的。很抱歉，我忘记添加代码了。是的，可以在css网格中实现chart.js。请检查这个：这很奇怪。你介意提供一个可运行的例子吗？看起来您的代码本身是正确的；）

And here is my javascript:

var myChartObject = document.getElementById("lineCharts");



var chart = new Chart(myChartObject, {
    type: "line",
    data: {
        labels: ["February", "March", "April", "May","June","July","August","September", "October", "November", "December","January"],
    
        datasets: [{
            label: "Total Covid Cases",
            backgroundColor: 'rgba(34, 49, 63, 1)',
            borderColor: 'rgba(34, 49, 63, 1)',
            data: [19,16605,29586,30845,31714,35232,42177,53282,154251,327072,452296,492832],
    
        }]
    }
});

 .chartdivs{
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "box1 box2"
    "box3 box4";
    
}



.myFirstChart{
    grid-area: box1;
}
.mySecondChart{
    grid-area: box2;
}
.myThirdChart{
    grid-area: box3;
}
.myFourthChart{
    grid-area: box4;
}