Chart.js

Question

我遇到图表响应问题。我使用 chart.js (version 3.6.0) 创建图表。

这是我的代码：

panel.html

<div class="container">
    <div class="chart-canvas">
        <canvas id="memberCount" width="auto" height="80px"></canvas>
    </div>
</div>

panel.css

.container {
    border-radius: 6px;
    background-color: rgb(47,59,82);
    width: 80%;
    display: inline-flex;
    margin: 32px 12px 32px 12px;
    flex-direction: column;
    flex-wrap: wrap;
}

.chart-canvas {
    padding: 32px;
}

panel.js:

var dateLabels = ['Jan 07', 'Jan 08', 'Jan 09', 'Jan 10', 'Jan 11', 'Jan 12'] //dates from mysql database
if(window.innerWidth <= 1080) {
    windowSizeChart = 4;
} else windowSizeChart = dateLabels.length-1

   

const ctx = document.getElementById('memberCount');
const myChart = new Chart(ctx, {
    data: {
        datasets: [
            {
                type: 'line',
                label: " New Members",
                data: [0, 602, 300, 600],
                backgroundColor: [
                    'rgba(54, 85, 179, 0.3)',
                ],
                borderColor: [
                    'rgba(259, 259, 259, 0.8)',
                ],
                borderWidth: 1,
                fill: true,
                pointHoverRadius: 4,
                pointHoverBackgroundColor: 'rgba(249, 249, 249, 1)',
                pointHoverBorderColor: 'rgba(249, 249, 249, 0.4)',
                animation: {
                    duration: 0
                  },
            }, {
                type: 'bar',
                label: " Total Users",
                data: [300, 100, 80, 40],
                backgroundColor: [
                    'rgba(255, 155, 90, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 154, 54, 0)'
                ],
                borderWidth: 1,
            }
        ],
    },
    options: {
        scales: {
            x: {
                grid: {
                    borderColor: 'rgba(255, 255, 255, 0.3)',
                    color: 'rgba(255, 255, 255, 0)'
                },
                
                ticks: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    maxTicksLimit: 50
                },
                labels: dateLabels.slice(0, windowSizeChart)
            },
            
            y: {
                grid: {
                    borderColor: 'rgba(255, 255, 255, 0.3)',
                    color: 'rgba(255, 255, 255, 0.05)',
                },
                ticks: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    fontWeight: '200',
                    autoSkip: true,
                    maxTicksLimit: 5,
                },
            }
        },
        interaction: {
            intersect: false,
            mode: 'index',
          },
        plugins: {
            responsive: true,
            legend: {
                display: true,
                align: 'center',
                position: 'bottom',
                labels: {
                    color: "rgba(249, 249, 249, 0.5)",
                    padding: 25,
                 },
            },
            tooltip: {
                intersect: false,
                usePointStyle: true,
                titleColor: "rgba(249, 249, 249, 1)",
                backgroundColor: '#18191c',
                titleSpacing: 0,
                padding: 14,
                color: "rgba(249, 249, 249, 0.5)",
                bodySpacing: 6,
                displayColors: true,
                callbacks: {
                    labelPointStyle: function(context) {
                        return {
                            pointStyle: 'dot',
                            rotation: 0,
                        };
                    },
                    labelTextColor: function(context) {
                        return 'rgba(249, 249, 249, 0.7)';
                    },
                }
            }
        }
    }
});

我正在尝试使图表适合 container。高度应该是固定的（80 像素），但宽度应该是响应式的（当变小时，宽度将与容器一样长 - +padding），但事实并非如此。
全尺寸 - 正确

变小时 - 宽度应适合容器 - 不重叠

另外，如果您知道如何创建图表以显示来自 MySQL 数据库的每日、每周和每月数据，请告诉我，谢谢。

请问有人知道吗？
谢谢大家的回复，
阿达尔伯特

Answer 1

答案在这里。我将 maintainAspectRatio 设置为 false，然后将 canvas 高度设置为 400（或您想要使用的任何高度）。

html:

<div class="container">
    <div class="chart-canvas">
        <canvas id="memberCount" height='400'></canvas>
    </div>
</div>

js:

var dateLabels = ['Jan 07', 'Jan 08', 'Jan 09', 'Jan 10', 'Jan 11', 'Jan 12']
if(window.innerWidth <= 1080) {
    windowSizeChart = 4;
} else windowSizeChart = dateLabels.length-1

const ctx = document.getElementById('memberCount');
const myChart = new Chart(ctx, {
    data: {
        datasets: [
            {
                type: 'line',
                label: " Total Members",
                data: [0, 600, 300, 600],
                backgroundColor: [
                    'rgba(54, 85, 179, 0.3)',
                ],
                borderColor: [
                    'rgba(259, 259, 259, 0.8)',
                ],
                borderWidth: 1,
                fill: true,
                pointHoverRadius: 4,
                pointHoverBackgroundColor: 'rgba(249, 249, 249, 1)',
                pointHoverBorderColor: 'rgba(249, 249, 249, 0.4)',
                animation: {
                    duration: 0
                  },
            }, {
                type: 'bar',
                label: " New Users",
                data: [721, 192, 290, 523],
                backgroundColor: [
                    'rgba(255, 155, 90, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 154, 54, 0)'
                ],
                borderWidth: 1,
            }
        ],
    },
    options: {
        maintainAspectRatio: false,
        interaction: {
            intersect: false,
            mode: 'index',
        },
        scales: {
            x: {
                grid: {
                    borderColor: 'rgba(255, 255, 255, 0.3)',
                    color: 'rgba(255, 255, 255, 0)'
                },
                
                ticks: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    autoSkip: true,
                },
                labels: dateLabels.slice(0, windowSizeChart)
            },
            
            y: {
                grid: {
                    borderColor: 'rgba(255, 255, 255, 0.3)',
                    color: 'rgba(255, 255, 255, 0.05)',
                },
                ticks: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    fontWeight: '200',
                    autoSkip: true,
                },
            }
        },
        plugins: {
            responsive: true,
            legend: {
                display: true,
                align: 'center',
                position: 'bottom',
                labels: {
                    color: "rgba(249, 249, 249, 0.5)",
                    padding: 40,
                 },
            },
            tooltip: {
                intersect: false,
                usePointStyle: true,
                titleColor: "rgba(249, 249, 249, 1)",
                backgroundColor: '#18191c',
                titleSpacing: 0,
                padding: 14,
                color: "rgba(249, 249, 249, 0.5)",
                bodySpacing: 6,
                displayColors: true,
                callbacks: {
                    labelPointStyle: function(context) {
                        return {
                            pointStyle: 'dot',
                            rotation: 0,
                        };
                    },
                    labelTextColor: function(context) {
                        return 'rgba(249, 249, 249, 0.7)';
                    },
                }
            }
        }
    }
});

css:

.serverData .container {
    border-radius: 6px;
    background-color: rgb(47,59,82);
    width: 80%;
    height: 400px;
    display: inline-block;
    margin: 32px 12px 32px 12px;
    flex-direction: column;
    flex-wrap: wrap;
}

.chart-canvas {
    padding: 32px;
}

Chart.js - 图表响应率/尺寸

Chart.js - graph responsivity / sizing

html

javascript

css

charts

这是我的代码：