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

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:

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.

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

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

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"]).

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
});`

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:

Com { showXLabels: 10 }a opção passada:

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

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
            }
          }
        ]
      }

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.

Eu tive um tipo de problema semelhante e recebi uma boa solução para o meu problema específico, mostrar rótulo na dica de ferramenta, mas não no eixo x para gráfico de linha chartjs . Veja se isso te ajuda

Esta resposta funciona perfeitamente.

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

var clone = function(el){ return el.slice(0); }

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.