Configurando largura e altura

88

Estou testando o código de exemplo para Chart.js fornecido na documentação .

A largura e a altura são especificadas em linha no elemento da tela em 400px / 400px.

Mas, ao renderizar o gráfico, ele é ampliado para a largura da página inteira e corta a extremidade direita.

Como / onde devo controlar a largura / altura do gráfico?

This is some bogus text because SO prohibits linking to Codepen otherwise.

chart.js

— Companheiro estranho
fonte

93

Você pode substituir a largura do estilo da tela! Importante ...

canvas{

  width:1000px !important;
  height:600px !important;

}

Além disso

especifique a responsive:true,propriedade nas opções.

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

atualizar nas opções adicionadas: maintainAspectRatio: false,

link: http://codepen.io/theConstructor/pen/KMpqvo

— KpTheConstructor
fonte

13

Obrigado, você maintainAspectRatio: falsetornou o gráfico visível. Mas ainda cortando o lado direito. Atingir esse tipo de problema já com seu próprio código de exemplo básico me faz pensar se chart.js é uma boa aposta. (O lado direito ainda está cortado ...)

— Companheiro Estranho

Isso resolve o problema do tamanho do gráfico, o gráfico não foi dimensionado para caber nele. Existe uma maneira de definir o tamanho do gráfico em Chart.js?

— Firix

7

Acontece que você precisa desligar o responsivo para fazer o gráfico obedecer aos tamanhos dados a ele. Pena que não parece haver maneira de controlá-lo e manter a natureza responsiva ...

— Firix

2

Obrigado. Você maintainAspectRatiorealmente me ajuda.

— Arsman Ahmad

Usar "! Important" não é a maneira certa de resolver isso, embora funcione. A solução @Nicolas abaixo de "envolver a tela em uma div" é a melhor maneira, pois teríamos controle sobre o redimensionamento da tela da maneira que desejarmos.

— Abhishek Boorugu

54

Você também pode simplesmente circundar o gráfico com o contêiner (de acordo com o documento oficial http://www.chartjs.org/docs/latest/general/responsive.html#important-note )

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

e com opções

responsive:true
maintainAspectRatio: false

— Nicolas
fonte

1

Isso funciona. A chave aqui é usar um div externo e definir a largura e a altura nele, em vez do elemento canvas.

— John Doherty

Para que isso funcione, o contêiner do gráfico deve estar relativamente posicionado.

— Sanju

funciona para mim, mas apenas !importantno projeto Angular

— Артур Гудиев

23

No meu caso, passar responsive: falsepor opções resolveu o problema. Não sei por que todo mundo está dizendo para você fazer o oposto, especialmente porque true é o padrão.

— Antimônio
fonte

1

O mesmo aqui. A configuração responsive: truedistorceu completamente a aparência do gráfico.

— Paulo

funciona para mim, mas apenas com !importantno meu projeto Angular

— Артур Гудиев

4

Funciona para mim também

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

Obrigado

— subramanya46
fonte

2

Não posso acreditar que ninguém falou sobre o uso de um elemento pai relativo.

Código:

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

Fontes: documentação oficial

— R. Gurung
fonte

0

Não mencionado acima, mas usar max-widthou max-heightno elemento canvas também é uma possibilidade.

— Ukuser32
fonte

0

O abaixo funcionou para mim - mas não se esqueça de colocar isso no parâmetro "opções".

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

— Dazeh
fonte

0

Isso ajudou no meu caso:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

— Omid N
fonte

0

Você pode alterar o de aspectRatioacordo com suas necessidades:

options:{
     aspectRatio:4 //(width/height)
}

— Yashvendar Badsiwal
fonte

Você pode esclarecer como isso funciona? 4não é uma proporção de aspecto. Seu comentário diz, (width/height)mas não está claro como isso deve ser aplicado. Existe uma maneira de passar isso como um conjunto? Ou você literalmente quer dizer dividir a largura proposta pela altura proposta, de modo que, por exemplo, 3: 4 se torne 0.75?

— Jeremy Caney

-3

Use isso, funciona bem.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

e abaixo options,

responsive:true,

— Udara
fonte