Redimensionamento da tela Chart.js

StackOverflow https://stackoverflow.com/questions/19847582

  •  29-07-2022
  •  | 
  •  

Pergunta

Em (Erro de tela HTML5 do Android WebView) postei uma pergunta sobre a plotagem de gráficos usando a biblioteca Graph.js.O problema que tenho agora é que, se eu chamar a função para traçar o gráfico várias vezes, a tela será redimensionada todas as vezes.Cada vez que o gráfico é redesenhado na mesma tela, seu tamanho também muda.Também tentei definir o tamanho da tela, mas sem sucesso.

Qual seria a razão?Por que a tela é sempre redimensionada?

Foi útil?

Solução

Eu tive muitos problemas com isso, porque depois de tudo isso meu gráfico de linha parecia terrível quando o mouse pairava e eu encontrei uma maneira mais simples de fazê -lo, espero que isso ajude :)

Use estas opções Chart.js:

// Boolean - whether or not the chart should be responsive and resize when the browser does.

responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container

maintainAspectRatio: false,

Outras dicas

O que está acontecendo é o Chart.js multiplica o tamanho da tela quando é chamado, tenta diminuí-lo usando CSS, o objetivo sendo fornecer gráficos de maior resolução para dispositivos de alto DPI.

O problema é que não percebe que já fez isso; portanto, quando chamado de tempos sucessivos, ele multiplica o tamanho já (dobrado ou o que for) até que as coisas comecem a quebrar. (O que realmente está acontecendo é que é verificar se deve adicionar mais pixels à tela alterando o atributo DOM para largura e altura, se deve, multiplicando -o por algum fator, geralmente 2, depois alterando isso e depois alterando o estilo CSS atributo para manter o mesmo tamanho na página.)

Por exemplo, quando você o executa uma vez e sua largura e altura de tela são definidas como 300, ele as define para 600 e muda o atributo de estilo para 300 ... mas se você o executar novamente, vê que a largura e a altura do DOM são 600 (verifique a outra resposta para esta pergunta para ver o porquê) e depois a define para 1200 e a largura e a altura do CSS para 600.

Não é a solução mais elegante, mas resolvi esse problema, mantendo a resolução aprimorada para dispositivos retina simplesmente definindo a largura e a altura da tela manualmente antes de cada chamada sucessiva para o Chart.js

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);

Isso funciona para mim:

<body>
    <form>
        [...]
        <div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
            <canvas id="cv_values"></canvas>

            <script type="text/javascript">
                var indicatedValueData = {
                    labels: ["1", "2", "3"],
                    datasets: [
                        {
                            [...]
                        };

                var cv_values = document.getElementById("cv_values").getContext("2d");
                var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
            </script>
        </div>
    </form>
</body>

O fato essencial é que precisamos definir o tamanho da tela no Div-Tag.

No iOS e o Android, o navegador esconde a barra de ferramentas quando você está rolando, alterando assim o tamanho da janela que o ChartJs de Lead para redimensionar o gráfico. A solução é manter a proporção.

var options = { 
    responsive: true,
    maintainAspectRatio: true
}

Isso deve resolver seu problema.

Eu tive que usar uma combinação de várias respostas aqui com alguns pequenos ajustes.

Primeiro, é necessário Que você enrole o elemento Canvas em um contêiner em nível de bloco. Eu digo a você, faça não Deixe o elemento Canvas ter algum irmãos; Que seja uma criança solitária, pois é teimoso e estragado. (O invólucro pode não precisar de restrições de dimensionamento, mas, para segurança, pode ser bom ter uma altura máxima aplicada a ele.)

Depois de garantir que as condições anteriores sejam atendidas, ao iniciar o gráfico, verifique se as seguintes opções são usadas:

var options = { 
    "responsive": true,
    "maintainAspectRatio": false
}

Se você deseja ajustar a altura do gráfico, faça -o no nível do elemento de tela.

<canvas height="500"></canvas>

Não tente lidar com a criança de nenhuma outra maneira. Isso deve resultar em um gráfico de forma satisfatória e adequadamente estabelecida, que permanece em seu berço pacificamente.

Como o JCMiller11 sugeriu, definir a largura e a altura ajuda. Uma solução um pouco mais agradável é recuperar a largura e a altura da tela antes de desenhar o gráfico. Em seguida, usando esses números para definir o gráfico em cada re-desenho subsequente do gráfico. Isso garante que não haja constantes no código JavaScript.

ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;

function drawchart() {
    ctx.canvas.width = ctx.canvas.originalwidth;
    ctx.canvas.height = ctx.canvas.originalheight;

    var chartctx = new Chart(ctx);
    myNewBarChart = chartctx.Bar(data, chartSettings); 
}

Eu tive um problema semelhante e encontrei sua resposta. Acabei cheguei a uma solução.

Parece que a fonte do Chart.js tem o seguinte (presumivelmente porque não deve renderizar e gráfico totalmente diferente na mesma tela):

    //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
if (window.devicePixelRatio) {
    context.canvas.style.width = width + "px";
    context.canvas.style.height = height + "px";
    context.canvas.height = height * window.devicePixelRatio;
    context.canvas.width = width * window.devicePixelRatio;
    context.scale(window.devicePixelRatio, window.devicePixelRatio);
}

Isso é bom se for chamado uma vez, mas quando você redesenhou várias vezes, você acaba alterando o tamanho do elemento de tela DOM várias vezes, causando re-tamanho.

Espero que ajude!

Eu estava tendo o mesmo problema. Consegui resolvê -lo configurando a opção:

responsive: false,
maintainAspectRatio: true,
showScale: false,

E no CSS, defina a largura do contêiner Div da mesma forma que a tela:

    #canvasContainer { 
      width: 300px;
    }
    
    canvas {
      width: 300px;
    }

Se alguém está tendo problemas, encontrei uma solução que não envolva sacrificar a capacidade de resposta etc.

Basta embrulhar sua tela em um contêiner Div (sem estilo) e redefinir o conteúdo da div para uma tela vazia com ID antes de chamar o construtor do gráfico.

Exemplo:

Html:

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

JS:

$("#chartContainer").html('<canvas id="myChart"></canvas>');
//call new Chart() as usual

Tentei redimensionar a tela usando o jQuery, mas não funciona bem. Eu penso CSS3 é a melhor opção que você pode experimentar, se quiser, o zoom em determinado nível.

Seguindo a opção de onda de pau de outro link CodePan:

.style_prevu_kit:hover{
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

Siga meu link CodePan:

https://codepen.io/hitman0775/pen/xzzzqn

Aqui está a dokumumentação oficial: https://www.chartjs.org/docs/latest/general/responsive.html

Detectar quando as alterações do tamanho da tela não podem ser feitas diretamente a partir do elemento Canvas. O Chart.js usa seu contêiner pai para atualizar os tamanhos de renderização e exibição do Canvas. No entanto, esse método exige que o contêiner seja relativamente posicionado e dedicado apenas à tela do gráfico. A capacidade de resposta pode ser alcançada definindo valores relativos para o tamanho do contêiner (exemplo):

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

Eu tive o mesmo tipo de problema de escala usando a CLI angular. Foi capaz de funcioná -lo removendo esta linha do index.html:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

E então, no arquivo angular cli.json, na seção Scripts, usando este:

"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]

Fonte: Mikebar58

Tentei várias respostas neste tópico e o que funcionou para mim foi (observe que estou usando reactjs), verificando meus adereços anteriores passados ​​​​para o componente gráfico.Quando eu estava redimensionando meu DOM, o gráfico foi redesenhado com dados vazios.

componentDidUpdate(prevProps: ChartProps) { if(prevProps.data !== props.data) renderChart(); }

O aceito - responsive:true, maintainAspectRatio:false - Não funcionou para o meu cenário. Mas descobri que podemos simplesmente chamar o update Método no gráfico.

Então eu me vi ajustando valores dentro dos ouvintes da MatchMedia .. como assim:

myRadarChart.options.scales.r.pointLabels.font.size = "1rem";
myRadarChart.update();

Adicionar div E isso vai resolver o problema

<div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>

 let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox);
 let width = canvasBox.clientWidth;
 let height = canvasBox.clientHeight;
 let charts = ReactDOM.findDOMNode(this.refs.charts);
 let ctx = charts.getContext('2d');
 ctx.canvas.width = width;
 ctx.canvas.height = height;
 this.myChart = new Chart(ctx);
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top