javascript - Eliminar la etiqueta/texto del eje x en chart.js

html5 charts

Question

¿Cómo oculto la etiqueta / texto del eje x que se muestra en chart.js?

Establecer scaleShowLabels:false solo elimina las etiquetas del eje y.

<script>
    var options = {
        scaleFontColor: "#fa0",
        datasetStrokeWidth: 1,
        scaleShowLabels : false,
        animation : false,
        bezierCurve : true,
        scaleStartValue: 0,
    };
    var lineChartData = {
        labels : ["1","2","3","4","5","6","7"],
        datasets : [
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [1,3,0,0,6,2,10]
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);

</script>

Answer 1

ACTUALIZAR chart.js 2.1 y superior

var chart = new Chart(ctx, {
    ...
    options:{
        scales:{
            xAxes: [{
                display: false //this will remove all the x-axis grid lines
            }]
        }
    }
});


var chart = new Chart(ctx, {
    ...
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false //this will remove only the label
                }
            }]
        }
    }
});

Referencia: documentación de chart.js

Respuesta anterior (escrita cuando la versión actual era 1.0 beta) solo para referencia a continuación:

Para evitar mostrar etiquetas en chart.js , debe establecer scaleShowLabels : false y también evitar pasar las labels :

<script>
    var options = {
        ...
        scaleShowLabels : false
    };
    var lineChartData = {
        //COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
        //labels : ["1","2","3","4","5","6","7"],
        ... 
    }
    ...
</script>

Answer 2

(esta pregunta es un duplicado de En chart.js, ¿es posible ocultar la etiqueta / el texto del eje x del gráfico de barras si se accede desde el móvil? ) Agregaron la opción, 2.1.4 (y tal vez un poco antes) lo tiene

var myLineChart = new Chart(ctx, {
    type: ''line'',
    data: data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false
                }
            }]
        }
    }
}

Answer 3

Enfrenta este problema de eliminar las etiquetas en Chartjs ahora. Parece que la documentación está mejorada. http://www.chartjs.org/docs/#getting-started-global-chart-configuration

Chart.defaults.global.legend.display = false;

esta configuración global evita que las leyendas se muestren en todos los Gráficos. Como esto fue suficiente para mí, lo usé. No estoy seguro de cómo evitar leyendas para gráficos individuales.

Answer 4

Inspirado por la respuesta de christutty, aquí hay una solución que modifica la fuente pero que no ha sido probada exhaustivamente. No he tenido ningún problema todavía.

En la sección de valores predeterminados, agregue esta línea alrededor de la línea 71:

// Boolean - Omit x-axis labels
omitXLabels: true,

Luego, alrededor de la línea 2215, agréguela en el método buildScale:

//if omitting x labels, replace labels with empty strings           
if(Chart.defaults.global.omitXLabels){
    var newLabels=[];
    for(var i=0;i<labels.length;i++){
        newLabels.push('''');
    }
    labels=newLabels;
}

Esto preserva las sugerencias de herramientas también.

Answer 5

La solución más simple es:

scaleFontSize: 0

ver el http://www.chartjs.org/docs/#getting-started-global-chart-configuration

pregunta smilar

Answer 6

Si desea que las etiquetas se conserven para la información sobre herramientas, pero no se muestren debajo de las barras, el siguiente truco puede ser útil. Realicé este cambio para usarlo en una aplicación de intranet privada y no lo he probado por eficiencia o efectos secundarios, pero hizo lo que necesitaba.

En la línea 71 de chart.js, agregue una propiedad para ocultar las etiquetas de la barra:

// Boolean - Whether to show x-axis labels
barShowLabels: true,

Aproximadamente en la línea 1500 use esa propiedad para suprimir el cambio de this.endPoint (parece que otras partes del código de cálculo son necesarias ya que fragmentos del gráfico desaparecieron o se procesaron incorrectamente si deshabilité algo más que esta línea).

if (this.xLabelRotation > 0) {
    if (this.ctx.barShowLabels) {
        this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3;
    } else {
        // don''t change this.endPoint
    }
}

En la línea 1644 use la propiedad para suprimir la representación de etiquetas:

if (ctx.barShowLabels) {    
    ctx.fillText(label, 0, 0);
}

Me gustaría hacer este cambio en la fuente Chart.js, pero no estoy familiarizado con git y no tengo tiempo para probar rigurosamente, así que preferiría evitar romper algo.

Answer 7

var lineChartData = {
    labels: ["", "", "", "", "", "", ""] // To hide horizontal labels
 ,datasets : [
  {
   label: "My First dataset",
   fillColor : "rgba(220,220,220,0.2)",
   strokeColor : "rgba(220,220,220,1)",
   pointColor : "rgba(220,220,220,1)",
   pointStrokeColor : "#fff",
   pointHighlightFill : "#fff",
   pointHighlightStroke : "rgba(220,220,220,1)",
   
   data: [28, 48, 40, 19, 86, 27, 90]
  }
 ]
}



window.onload = function(){
 var options = {
  scaleShowLabels : false // to hide vertical lables
 };
 var ctx = document.getElementById("canvas1").getContext("2d");
 window.myLine = new Chart(ctx).Line(lineChartData, options);

}