Chart.js v2 – ocultar las líneas de cuadrícula

Estoy usando Chart.js v2 para dibujar un gráfico de líneas. Todo parece bien, pero no son las líneas de la cuadrícula que no quiero:

Chart.js v2 - ocultar las líneas de cuadrícula

La documentación de Gráfico de Línea está aquí: https://nnnick.github.io/Chart.js/docs-v2/#line-chart, pero no puedo encontrar nada acerca de esconder esas «Líneas de la Cuadrícula».

¿Cómo puedo eliminar las líneas de la cuadrícula?

InformationsquelleAutor iSS | 2016-04-17

6 Kommentare

  1. 269

    He encontrado una solución que funciona para ocultar las líneas de cuadrícula en un gráfico de líneas.

    Conjunto de la gridLines color a ser el mismo que el div del color de fondo.

    var options = {
        scales: {
            xAxes: [{
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                }
            }],
            yAxes: [{
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                }   
            }]
        }
    }

    o uso

    var options = {
        scales: {
            xAxes: [{
                gridLines: {
                    display:false
                }
            }],
            yAxes: [{
                gridLines: {
                    display:false
                }   
            }]
        }
    }
    • Esto es en realidad la configuración de las líneas de la cuadrícula de color a un 0 opacity negro (un color transparente). Así que esto debería funcionar independientemente de la div del color de fondo.
    • O el uso de la pantalla:false, en lugar de «color»
    • Muchas gracias! Si la documentación que se fue un poco más claro sobre este tema. 🙂
    • Quería mantener la escala, pero perder las líneas de cuadrícula en la parte trasera de la tabla, de manera que esta respuesta no me funciona.
    • Aunque esta primera respuesta puede llegar a la imagen deseada, es un poco de un hack. La segunda solución, que establece las líneas de la cuadrícula de la pantalla de la propiedad a false, parece ser más correcto.
  2. 30
    options: {
        scales: {
            xAxes: [{
                gridLines: {
                    drawOnChartArea: false
                }
            }],
            yAxes: [{
                gridLines: {
                    drawOnChartArea: false
                }
            }]
        }
    }
    • Esta respuesta me permitió mantener la escala, pero no dibujar las líneas de la cuadrícula en el gráfico.
    • Este trabajó para mí gracias
  3. 18

    Si quieres desaparecido por defecto, puedes configurar:

    Chart.defaults.scale.gridLines.display = false;
  4. 9

    Si quieres ocultar las líneas de división, pero quiero mostrar yAxes, se puede establecer:

    yAxes: [{...
             gridLines: {
                            drawBorder: true,
                            display: false
                        }
           }]
  5. 0

    El código siguiente elimina quitar las líneas de la cuadrícula del área de gráfico sólo no son los de x&y las etiquetas del eje de

    Chart.defaults.scale.gridLines.drawOnChartArea = false;

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea