muestra las líneas del eje x y del eje y sin las líneas de la cuadrícula usando flot

Question

Estoy usando flot para mostrar gráficos de barras. Cuando configuro el tickLength en 0, oculta las líneas verticales y horizontales, pero también oculta las líneas del eje xy del eje y. Necesito el eje xy el eje y sin las líneas verticales y horizontales de la cuadrícula. ¿Hay alguna forma de hacer esto?

Consulte el segundo gráfico en la imagen. Eso es lo que quiero.

Answer 1

Esto es más complicado de lo que pensé que sería. La única cosa que puedo llegar a es desactivar las líneas de borde y eje, que añadirlos manualmente hacia:

$(function() { 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    $.plot($("#placeholder"), 
     [{data: d2, 
     bars: { 
      show: true 
     }} 
     ], 
     { 
     xaxis: { 
      tickLength: 0 
     }, 
     yaxis: { 
      tickLength: 0 
     }, 
     grid: { 
      borderWidth: 0, 
      aboveData: true, 
      markings: [ { xaxis: { from: 0, to: 10 }, yaxis: { from: 0, to: 0 }, color: "#000" }, 
         { xaxis: { from: 0, to: 0 }, yaxis: { from: 0, to: 15 }, color: "#000" }] 
     } 
     } 
    ); 
}); 

Produce:

Answer 2

obras respuesta Marcar pero es un poco demasiado codificado para sus datos. Éste es un poco mejor:

$(function() { 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    $.plot($("#placeholder"), 
     [{data: d2, 
     bars: { 
      show: true 
     }} 
     ], 
     { 
     xaxis: { 
      tickLength: 0 
     }, 
     yaxis: { 
      tickLength: 0 
     }, 
     grid: { 
      borderWidth: 0, 
      aboveData: true, 
      markings: [ { yaxis: { from: 0, to: 0 }, color: "#000" }, 
         { xaxis: { from: 0, to: 0 }, color: "#000" }] 
     } 
     } 
    ); 
}); 

Aún si su carta comienza a un valor diferente a 0 usted tiene que cambiar manualmente las marcas.

Answer 3

Para el caso de un (0,0) origen, se puede falsificar los ejes de dibujo simplemente parte inferior y las líneas de borde izquierdo:

grid: { 
    borderColor: 'black', 
    borderWidth: { 
     top: 0, 
     right: 0, 
     bottom: 2, 
     left: 2 
    }, 
    ... 
} 

Answer 4

Configuración

eje x: {tickLength: 0 }, yaxis: {tickLength: 0}

también ocultará las líneas de la cuadrícula.

Answer 5

Tratar de colorear las líneas en blanco (o su bg color)

yaxis: 
    . . . 
    tickColor: "#cccccc" /* or better "#ffffff" */ 
    . . .