使用ChartJs制作响应式3图

Question

我有3张图表，我想让所有这些都变得更加敏感。 在电话或其他屏幕上。 有时图表会叠加在垂直线上

您可以找到包含3个图表的屏幕。

3 Charts

我使用

var option: Chart.ChartOptions = {
        responsive: true,
        maintainAspectRatio: true,

index.html

       <div class="chart1">
            <canvas id="stub_pressureCanvas"></canvas>
        </div>
        <div class="chart2">
            <canvas style=""id="stub_flowCanvas"></canvas>
        </div>
        <div class="chart3">
            <canvas id="stub_volumeCanvas"></canvas>
        </div>

Style.css

.chart1{
    width: 40%;
    position: absolute;
    top: 24%;
    left: 45%;
    transform: translate(-50%, -50%);

}

.chart2{
    width: 40%;
    position: absolute;
    top: 53%;
    left: 45%;
    transform: translate(-50%, -50%);

}


.chart3{
    width: 40%;
    position: absolute;
    top: 81.5%;
    left: 45.5%;
    transform: translate(-50%, -50%);
}