javascript - muestra la etiqueta en la información sobre herramientas pero no en el eje x para el gráfico de líneas chartjs

canvas charts

Question

Actualmente estoy usando un gráfico de líneas con chart.js, y tengo un conjunto de etiquetas que se ve así ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"] . Quiero que la etiqueta relevante se muestre en la información sobre herramientas para el gráfico, pero solo quiero que todas las etiquetas alternas aparezcan en el eje x del gráfico para evitar la aglomeración. ¿Hay alguna manera de lograr esto?

Actualmente estoy reemplazando cada segundo valor de mi matriz con "", pero mientras esto elimina la acumulación de mi eje x, no cumple con mi requisito de mostrar la etiqueta en la información sobre herramientas.

Answer 1

Simplemente extienda el gráfico de líneas y reemplace las etiquetas x que no quiere después de su inicialización

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        var xLabels = this.scale.xLabels
        xLabels.forEach(function (label, i) {
            if (i % 2 == 1)
                xLabels[i] = '''';
        })
    }
});


var lineChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    datasets: [
        {
            fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
            data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLine = new Chart(ctx).LineAlt(lineChartData);

Fiddle - http://jsfiddle.net/ttz5t3dx/

Answer 2

Para ampliar en potatopeelings respuesta, podemos hacer:

var xLabels = this.scale.xLabels
var modVal = Math.ceil( xLabels.length / 10)                    
xLabels.forEach(function (label, i)
{
    if (i % modVal != 0)
        xLabels[i] = '''';
})

para limitar el número de etiquetas (en este caso 10) para que sus etiquetas nunca se llenen, no importa cuántos puntos de datos tenga.

Answer 3

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

 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 en a:

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

Answer 4

En Chart Options, bajo xAxes puede especificar la propiedad maxTickLimit a su gusto:

xAxes: [{
        ticks: {
        autoSkip:true,
        maxTicksLimit:3
        }
     }]

Fiddle: https://jsfiddle.net/p63z7zys/1/

Answer 5

Esta fue una de las cosas más difíciles con las que trato al usar ChartJs.

Voy a compartir mi solución: acabo de jugar con las opciones de gráfico. Primero definiré algunas propiedades para mi xAxe. Tenga en cuenta que estoy formateando la etiqueta usando la devolución de llamada :

scales: {
    xAxes: [{
       id: "x-", stacked: false, ticks: { 
       autoSkip: false, callback: (label) => { return label + "TEST" } }
       }
    ]}

Para formatear el título de la información sobre herramientas, voy a usar opciones de devolución de llamada para la información sobre herramientas :

    tooltips: {
        callbacks: {
            title : (tooltipItems, data) => {
               var labelIndex = tooltipItems[0].index;
               var realLabel = data.labels[labelIndex];
               return realLabel + "TOOLTIP";
      }
    }
  }

Utilizando las opciones de gráfico así, puedo mostrar contenido diferente para las etiquetas del eje X y los títulos correspondientes de la información sobre herramientas:

enter image description here

Puedes encontrar la muestra completa aquí .

Espero que esto ayude.