Limitar o número de rótulos no gráfico de linhas Chart.js

94

Quero exibir todos os pontos em meu gráfico a partir dos dados que obtenho, mas não quero exibir todos os rótulos para eles, porque então o gráfico não é muito legível. Eu estava procurando por isso na documentação, mas não encontrei nenhum parâmetro que pudesse limitar isso.

Não quero pegar apenas três rótulos, por exemplo, porque então o gráfico também é limitado a três pontos. É possível?

Eu tenho algo assim agora:

insira a descrição da imagem aqui

Se eu pudesse deixar a cada três ou quatro gravadoras, seria ótimo. Mas não encontrei absolutamente nada sobre as opções de rótulos.

mmmm
fonte
você pode fornecer o link?
Dheeraj
para o site? não, estou fazendo um aplicativo no Android e este gráfico está na minha página local ..
mmmm
Especifique qual biblioteca você usa, ChartJS by DevExpress ou Chart.js?
Pavel Gruba
@mmmm você descobriu alguma coisa? Tentei a resposta de Nikita abaixo, mas ela me deixou com uma estranha lacuna: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder
A resposta de Nikita parece ser a correta. @mmmm, por favor, considere marcá-la como a resposta correta stackoverflow.com/a/39326127/179138
Caio Cunha

Respostas:

148

Experimente adicionar a options.scales.xAxes.ticks.maxTicksLimitopção:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
Nikita Ag
fonte
4
A resposta acima, mais esta resposta aqui stackoverflow.com/a/37257056/558094 , é a bomba.
Vinayak Garg
3
Algo está errado aqui. Estou tendo uma grande lacuna entre os dois últimos ticks: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder
2
De onde você consegue essa informação? Um monte de respostas que estou lendo para Chart.js - não consigo encontrar em seus documentos chartjs.org/docs/latest , estou perdendo algum lugar onde possa realmente encontrar todas aquelas pequenas propriedades e retornos de chamada substituíveis documentados?
Max Yari,
1
senhor, você é incrível!
Jay Geeth
1
Você também pode adicionar maxRotation: 0se não quiser girar antes de começar a soltar os rótulos.
Caio Cunha
22

Para concretizar, digamos que sua lista original de rótulos seja semelhante a:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

Se você deseja exibir apenas a cada 4 rótulos, filtre sua lista de rótulos de forma que cada quarto rótulo seja preenchido e todos os outros sejam a string vazia (por exemplo ["0", "", "", "", "4", "", "", "", "8"]).

ben
fonte
Este é um ótimo hack, obrigado! Eu adicionei aqui .
Trufa
40
Lembre-se de que a passagem ""também remove as dicas correspondentes no gráfico!
Haywire
3
A menos que eu estou errado isso pode ser facilmente feito com uma compreensão da lista, se você quiser, por exemplo para mostrar cada etiqueta 10: my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. O número 10 pode ser declarado como uma constante no início do arquivo para facilitar a parametrização do processo.
pkaramol
também poderia ser feito sem "", como na resposta a esta pergunta problema de linha de cintura vertical com chart.js onde o OP tinha um problema com linha preta aparece na primeira ocorrência desta aspa dupla, nesse caso ajudou, novamente como @ haywire mencionou que remove o rótulo da dica de ferramenta
Mi-Criatividade
15

Para quem deseja conseguir isso no Gráfico JS V2, o seguinte funcionará:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                    var xLabels = data.ticks;

                    xLabels.forEach(function (labels, i) {
                        if (i % 2 == 1){
                            xLabels[i] = '';
                        }
                    });
                } 
            }]   
        }
}

Em seguida, passe a variável options como de costume para um:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`
George D
fonte
13

ATUALIZAR:

Atualizei meu fork com o pull mais recente (em 27 de janeiro de 2014) do branch master Chart.js do NNick. https://github.com/hay-wire/Chart.js/tree/showXLabels

RESPOSTA ORIGINAL:

Para aqueles que ainda enfrentam esse problema, fiz um fork do Chart.js há algum tempo para resolver o mesmo problema. Você pode conferir em: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Older branch! Verifique o branch showXLabels para obter o pull mais recente.

Como usar:

Aplicável ao gráfico de barras e gráfico de linha.

O usuário agora pode passar um { showXLabels: 10 } para exibir apenas 10 rótulos (a contagem real de rótulos exibidos pode ser um pouco diferente dependendo do número total de rótulos presentes no eixo x, mas ainda permanecerá perto de 10, no entanto)

Ajuda muito quando há uma grande quantidade de dados. Anteriormente, o gráfico costumava parecer devastado devido aos rótulos do eixo x desenhados uns sobre os outros no espaço apertado. ComshowXLabels , o usuário agora tem o controle para reduzir o número de rótulos para qualquer número de rótulos que cabem no espaço disponível para ele.

Veja as imagens em anexo para uma comparação.

Sem showXLabelsopção: insira a descrição da imagem aqui

Com { showXLabels: 10 }a opção passada: insira a descrição da imagem aqui

Aqui está uma discussão sobre isso: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Haywire
fonte
Adoraria usar isso, mas devo estar fazendo algo errado. Referenciei github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js, mas (em 30 de outubro de 2015) ele não funciona e nem mesmo contém a frase "showXLabels". O mais antigo, em github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js , funciona muito bem. Adoraria obter uma versão funcional e marcada do último para que eu possa fazer um link de CDN com segurança no RawGit. Este Fiddle (embora não destilado apenas para o problema) mostra o que quero dizer: jsfiddle.net/45cLcxdh/14
rkagerer
Tentei usar isso, mas parece que 'Chart.Line.js' não é usado, portanto, nada muda. Usei "new Chart (ctx) .Line (data, options);" para criar um gráfico.
FlyingNimbus
Usando o Chart JS 2.6.0 e a opção não funciona. Por fim, tive que usar a resposta de
@ben
1
Acho que isso faz parte de uma versão anterior
alexalejandroem
@alexalejandroem Sim, foi respondido em 2014! ;-)
Haywire
3

para rotação do eixo

usa isto:

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }
Edgar Olivar
fonte
2

De acordo com a edição nº 12 do github chart.js . As soluções atuais incluem:

  1. Use 2.0 alpha (não produção)
  2. Ocultar o eixo x quando ele se tornar muito grande (não pode aceitar de forma alguma)
  3. controlar manualmente o salto de rótulo do eixo x (não na página responsiva)

No entanto, depois de alguns minutos, acho que há uma solução melhor.

O seguinte snippet ocultará os rótulos automaticamente . Modifique xLabelscom uma string vazia antes de invocar draw()e restaure-os depois disso. Ainda mais, rótulos x rotativos podem ser aplicados, pois há mais espaço depois de ocultar.

var axisFixedDrawFn = function() {
    var self = this
    var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
    var xLabelPerFontSize = self.fontSize / widthPerXLabel
    var xLabelStep = Math.ceil(xLabelPerFontSize)
    var xLabelRotationOld = null
    var xLabelsOld = null
    if (xLabelStep > 1) {
        var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
        xLabelRotationOld = self.xLabelRotation
        xLabelsOld = clone(self.xLabels)
        self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
        for (var i = 0; i < self.xLabels.length; ++i) {
            if (i % xLabelStep != 0) {
                self.xLabels[i] = ''
            }
        }
    }
    Chart.Scale.prototype.draw.apply(self, arguments);
    if (xLabelRotationOld != null) {
        self.xLabelRotation = xLabelRotationOld
    }
    if (xLabelsOld != null) {
        self.xLabels = xLabelsOld
    }
};

Chart.types.Bar.extend({
    name : "AxisFixedBar",
    initialize : function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Chart.types.Line.extend({
    name : "AxisFixedLine",
    initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Observe que cloneé uma dependência externa.

Yegong
fonte
0

Esta resposta funciona perfeitamente.

Se você está se perguntando sobre a clonefunção, tente esta:

var clone = function(el){ return el.slice(0); }
Lackneets
fonte
-1

No arquivo Chart.js, você deve encontrar (na linha 884 para mim)

var Line = function(...
    ...
    function drawScale(){
        ...
        ctx.fillText(data.labels[i], 0,0);
        ...

Se você apenas encerrar a chamada de uma linha para fillTextcom if ( i % config.xFreq === 0){ ... } e, em seguida, chart.Line.defaultsadicionar algo linha, xFreq : 1você deve ser capaz de começar a usar xFreqem seu optionsquando você ligarnew Chart(ctx).Line(data, options) .

Lembre-se de que isso é muito hacky.

Jake
fonte
3
nunca altere o arquivo de biblioteca original, que será interrompido após uma atualização de versão.
Raptor