Início / user-12532589

The-Coder-Who-Knew-Too-Little's questions

Martin Hope
The-Coder-Who-Knew-Too-Little
Asked: 2025-04-25 14:18:54 +0800 CST
  • 6

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
Martin Hope
The-Coder-Who-Knew-Too-Little
Asked: 2025-03-29 05:44:34 +0800 CST
  • 7

Estou tentando analisar strings de tempo HTML em Python :

from datetime import datetime

input = "2025-03-24T07:01:53+00:00"
output = datetime.strptime(input, "%Y-%m-%d%X%:z")
print(output)

Executar isso com Python 3.13 retorna o seguinte erro:

Traceback (most recent call last):
  File "/Users/dread_pirate_roberts/html_time_converter/main.py", line 69, in <module>
    output = datetime.strptime(input, "%Y-%m-%d%X%:z")
  File "/Library/Frameworks/Python.framework/Versions/3.13/lib/python3.13/_strptime.py", line 674, in _strptime_datetime
    tt, fraction, gmtoff_fraction = _strptime(data_string, format)
                                    ~~~~~~~~~^^^^^^^^^^^^^^^^^^^^^
  File "/Library/Frameworks/Python.framework/Versions/3.13/lib/python3.13/_strptime.py", line 445, in _strptime
    raise ValueError("'%s' is a bad directive in format '%s'" %
                        (bad_directive, format)) from None
ValueError: ':' is a bad directive in format '%Y-%m-%d%X%:z'

Isso não faz sentido para mim porque %:zfoi adicionado no Python 3.12 .

Editar: Descobri que meu código na verdade tem 2 bugs. Primeiro, a string de formato deve incluir um T. Além disso, a resposta do InSync, então o código deve ser:

from datetime import datetime

input = "2025-03-24T07:01:53+00:00"
output = datetime.strptime(input, "%Y-%m-%dT%X%z")
print(output)
python