Início / coding / Perguntas / 79591915
Accepted
The-Coder-Who-Knew-Too-Little
Asked: 2025-04-25 14:18:54 +0800 CST

ChartJS faz o contêiner preencher todo o item da grade CSS

  • 772

Estou inserindo um gráfico (feito com Chart.js) dentro de uma grade CSS e quero que o gráfico preencha responsivamente toda a largura da célula da grade. No entanto, mesmo depois de ativar responsivee desativar maintainAspectRatioo recurso para o gráfico, ele não é redesenhado para preencher o contêiner se a janela de visualização for ampliada o suficiente.

Para reproduzir:

<main>
    <div id="chart-container">
        <canvas id="chart"></canvas>
    </div>
    <div id="other">Some other data here</div>
</main>

<style>
    main {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            'chart chart more';
    }
    #chart-container {
        grid-area: chart;
    }
    #other {
        grid-area: more;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const chartElement = document.getElementById('chart');
    new Chart(chartElement, {
        type: 'line',
        responsive: true,
        maintainAspectRatio: false,
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: 'Sample Data',
                data: [17, 15, 8, 2, 12, 19]
            }]
        }
    });
</script>

Aqui estão capturas de tela com linhas de grade ativadas nas ferramentas do desenvolvedor para ilustrar o problema.

Largura normal da janela de visualização: O gráfico quando a janela de visualização está na largura normal, como esperado.

Janela de visualização mais ampla: Quando a janela de visualização é ampliada, o gráfico não é redimensionado.

Se eu adicionar width: 100%ao contêiner, não há diferença no redimensionamento. Se eu adicionar width: 100%ao elemento canvas, o gráfico fica distorcido (como quando você redimensiona uma imagem horizontalmente, mas não verticalmente). Também adicionei o seguinte para tentar forçar o evento de redimensionamento a ser acionado no gráfico ao redimensionar a janela, sem diferença:

window.addEventListener('beforeprint', () => {
    chartElement.resize();
})

Tenho vasculhado a documentação do Chart.js em busca de outras soluções possíveis, mas não encontrei nenhuma. Existe alguma maneira de fazer com que o gráfico seja redesenhado para ocupar toda a largura da célula da grade quando a janela de visualização for redimensionada? Agradeço antecipadamente!

javascript

1 respostas

  1. Best Answer

    Você pode usar o resizeouvinte de eventos para isso, e também precisa chamar a resize()instância do gráfico, não on chartElement:

    <script>
    const chartElement = document.getElementById('chart');
    const chartInstance = new Chart(chartElement, 
       // ...
    );

    window.addEventListener('resize', () => { chartInstance?.resize(); });
</script>
    • 1

relate perguntas