Limitar el número de etiquetas en el gráfico de líneas Chart.js

Quiero mostrar todos los puntos en mi gráfico a partir de los datos que obtengo, pero no quiero mostrar todas las etiquetas para ellos, porque entonces el gráfico no es muy legible. Lo estaba buscando en los documentos, pero no pude encontrar ningún parámetro que limite esto.

No quiero tomar solo tres etiquetas, por ejemplo, porque entonces el gráfico también se limita a tres puntos. ¿Es posible?

Tengo algo así ahora mismo:

Si pudiera dejar una etiqueta cada tercer cuarto, sería genial. Pero no encontré absolutamente nada sobre las opciones de etiquetas.

Intente agregar la options.scales.xAxes.ticks.maxTicksLimitopción:

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

Para ser más concreto, digamos que su lista original de etiquetas se ve así:

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

Si solo desea mostrar cada cuarta etiqueta, filtre su lista de etiquetas para que cada cuarta etiqueta se complete y todas las demás sean la cadena vacía (por ejemplo ["0", "", "", "", "4", "", "", "", "8"]).

Para cualquiera que busque lograr esto en Chart JS V2, funcionará lo siguiente:

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


                    var xLabels = data.ticks;

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

Luego, pase la variable de opciones como de costumbre a:

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

ACTUALIZAR:

Actualicé mi bifurcación con la última extracción (a partir del 27 de enero de 2014) de la rama maestra Chart.js de NNick. https://github.com/hay-wire/Chart.js/tree/showXLabels

RESPUESTA ORIGINAL:

Para aquellos que aún enfrentan este problema, bifurqué Chart.js hace un tiempo para resolver el mismo problema. Puede consultarlo en: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => ¡Rama más antigua! Consulte la rama showXLabels para obtener la última extracción.

Cómo utilizar:

Aplicable a gráfico de barras y gráfico de líneas.

El usuario ahora puede pasar a { showXLabels: 10 }para mostrar solo 10 etiquetas (el recuento real de etiquetas mostradas puede ser un poco diferente dependiendo del número total de etiquetas presentes en el eje x, pero aún permanecerá cerca de 10)

Ayuda mucho cuando hay una gran cantidad de datos. Anteriormente, el gráfico solía verse devastado debido a las etiquetas del eje x dibujadas unas sobre otras en el reducido espacio. Con showXLabels, el usuario ahora tiene el control para reducir la cantidad de etiquetas a cualquier cantidad de etiquetas que quepan bien en el espacio disponible para él.

Vea las imágenes adjuntas para una comparación.

Sin showXLabelsopción:

Con { showXLabels: 10 }pasado a la opción:

Aquí hay una discusión al respecto: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

para la rotación del eje

utilizar este:

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

De acuerdo con el número 12 de github de chart.js . Las soluciones actuales incluyen:

1. Utilice 2.0 alfa (no producción)
2. Ocultar el eje x en absoluto cuando se vuelve demasiado concurrido (no se puede aceptar en absoluto)
3. controlar manualmente la omisión de etiquetas del eje x (no en la página de respuesta)

Sin embargo, después de unos minutos, creo que hay una mejor solución.

El siguiente fragmento ocultará las etiquetas automáticamente . Modificando xLabelscon una cadena vacía antes de invocarlos draw()y restaurándolos después. Aún más, se pueden aplicar etiquetas x rotatorias ya que hay más espacio después de esconderse.

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

Tenga en cuenta que clonees una dependencia externa.

Tuve un tipo de problema similar y me dieron una buena solución a mi problema específico mostrar la etiqueta en la información sobre herramientas pero no en el eje x para el gráfico de líneas chartjs . Mira si esto te ayuda

Esta respuesta funciona a las mil maravillas.

Si se está preguntando acerca de la clonefunción, pruebe esta:

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

En el archivo Chart.js, debería encontrar (en la línea 884 para mí)

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

Si simplemente envuelve esa llamada de una línea fillTextcon if ( i % config.xFreq === 0){ ... } y luego chart.Line.defaultsagrega algo xFreq : 1, debería poder comenzar a usar xFreqen su optionscuando llame new Chart(ctx).Line(data, options).

Eso sí, esto es bastante hacky.