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

95

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:

ingrese la descripción de la imagen aquí

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

mmmm
fuente
¿Puede proporcionar un enlace?
Dheeraj
al sitio web? no, estoy haciendo la aplicación en Android y este gráfico está en mi página local ..
mmmm
Por favor, especifique qué biblioteca utiliza, ChartJS de DevExpress o Chart.js.
Pavel Gruba
@mmmm, ¿se te ocurrió algo? Probé la respuesta de Nikita a continuación, pero me dejó con esta extraña brecha: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder
La respuesta de Nikita parece ser la correcta. @mmmm, considere marcarlo como la respuesta correcta stackoverflow.com/a/39326127/179138
Caio Cunha

Respuestas:

151

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

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
Nikita Ag
fuente
4
La respuesta anterior más esta respuesta aquí stackoverflow.com/a/37257056/558094 , es la bomba.
Vinayak Garg
3
Algo está mal aquí. Obtengo
Mark Boulder
2
¿De dónde sacas esta información? Un montón de respuestas que estoy leyendo para Chart.js: no puedo encontrar en sus documentos chartjs.org/docs/latest , ¿me falta algún lugar donde pueda encontrar todas esas pequeñas propiedades y devoluciones de llamada anulables documentadas?
Max Yari
1
señor, es increíble!
Jay Geeth
1
También puede agregar maxRotation: 0si desea que no gire antes de comenzar a soltar las etiquetas.
Caio Cunha
22

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

ben
fuente
¡Este es un gran truco, gracias! Lo agregué aquí .
Trufa
40
Tenga en cuenta que pasar ""también elimina la información sobre herramientas correspondiente en el gráfico.
Haywire
3
A menos que me equivoque esto puede hacerse fácilmente con una lista por comprensión si quieres por ejemplo, para mostrar todas las etiquetas 10a: my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. Por supuesto, el número 10 puede declararse como una constante al comienzo del archivo para facilitar la parametrización del proceso.
pkaramol
también se podría hacer sin "", como en la respuesta a esta pregunta, el problema de la línea de ceñido vertical con chart.js donde el OP tenía un problema con la línea negra aparece en la primera aparición de esta comilla doble, en tal caso ayudó, nuevamente como @ haywire mencionó que elimina la etiqueta de la descripción emergente
Mi-Creativity
15

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
});`
George D
fuente
13

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: ingrese la descripción de la imagen aquí

Con { showXLabels: 10 }pasado a la opción: ingrese la descripción de la imagen aquí

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

Loco
fuente
Me encantaría usar esto, pero debo estar haciendo algo mal. Hice referencia a github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js pero (a 30 de octubre de 2015) no funciona y ni siquiera contiene la frase "showXLabels". El más antiguo, en github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js , funciona bien. Me encantaría obtener una versión etiquetada y funcional de la última para poder vincularla con CDN de manera segura desde RawGit. Este violín (aunque no se destila solo al problema) muestra lo que quiero decir: jsfiddle.net/45cLcxdh/14
rkagerer
Intenté usar esto pero parece que 'Chart.Line.js' no se usa, por lo que no cambia nada. Usé "New Chart (ctx) .Line (data, options);" para crear un gráfico.
FlyingNimbus
Usando Chart JS 2.6.0 y la opción no funciona. Finalmente tuve que usar la respuesta de @ ben stackoverflow.com/a/26183983/3319454
3bdalla
1
Creo que esto es parte de una versión anterior
alexalejandroem
@alexalejandroem ¡Sí, se respondió en 2014! ;-)
Haywire
3

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
            }
          }
        ]
      }
Edgar Olivar
fuente
2

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.

yegong
fuente
0

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); }
Lackneets
fuente
-1

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.

Jake
fuente
3
nunca cambie el archivo de biblioteca original, que se romperá después de una actualización de la versión.
Raptor