2008-10-04 18 views
17

El Flot API documentation describe los extensos ganchos de la biblioteca para personalizar los ejes de un gráfico. Puede establecer el número de ticks, su color, etc. por separado para cada eje. Sin embargo, no puedo entender cómo evitar que Flot dibuje las líneas verticales de la cuadrícula sin eliminar también las etiquetas del eje x. Intenté cambiar las opciones tickColor, ticks y tickSize sin éxito.En Flot, ¿es posible eliminar u ocultar marcas de cuadrícula sin eliminar la etiqueta correspondiente?

Quiero crear hermosas, gráficos compatibles con Tufte como éstas:

http://www.robgoodlatte.com/wp-content/uploads/2007/05/tufte_mint.gif http://www.argmax.com/mt_blog/archive/RealGDP_graph.jpg

puedo encontrar las garrapatas verticales en mis gráficos para ser gráfico de basura. Estoy trabajando con una serie temporal que estoy mostrando como barras verticales, por lo que las marcas verticales a menudo cortan las barras de una manera que es visualmente ruidosa.

+6

Los enlaces están rotos. – dfrankow

+0

¿Podemos aceptar la respuesta de @dkrape con más de 20 upvotes, que está más actualizado? –

Respuesta

58

Como notó Laurimann, Flot sigue evolucionando. La capacidad de controlar esto se ha agregado a la API (como se señala en el problema de la flotilla al que Nelson se vinculó).

Si descarga la versión más reciente (que todavía está etiquetado 0.6), puede desactivar las líneas en un eje con "tickLength", así:

xaxis: { 
    tickLength: 0 
} 

Más bien molesto, esta adición no se ha actualizado en la documentación de API.

+1

Tuve que descargarlo directamente de la fuente: http://flot.googlecode.com/svn/ trunk/ –

+0

Buen punto Kevin.Sí, también tuve que obtener esto del trunk. Deben iterar el número de versión y agregarlo a la descarga primaria. – Darren

+0

La adición se actualizó en la documentación de la API del maletero cuando miré. No está en una de las descargas, debe obtener tanto el JS como el API doc del repositorio. –

6

Después de investigar un poco, estoy bastante seguro de que no es posible a través de la API de Flot. Sin embargo, si te ensucias mucho, puedes hacerlo, he publicado un modified version of one example que lo hace. Ver fuente muestra toda la fealdad.

+1

Por lo tanto, sería correcto resumir su enfoque de la siguiente manera: 1) use marcas minúsculas en el eje para que no se muestren; 2) construye las etiquetas ustedes mismos usando divs personalizados con un estilo absoluto calculado para asegurarse de que entren en el lugar correcto? –

+0

Parece que esto está muy cerca de la cantidad de elementos internos de Flot :) –

+0

¿Alguna manera de envolverlo y enviarlo como parche? (PD: gracias por la respuesta, creo que tienes razón y voy a aceptarla ahora) –

2

A partir de junio de 2009 hay flot issue 167 que es una solicitud para esta función exacta. Incluye dos implementaciones y algún acuerdo del autor de flot que es una buena idea.

7

Esta publicación llega más de dos años después de que OP y Flot (ahora versión 0.6) hayan evolucionado mucho durante ese tiempo o quizás haya mejores opciones que esta, pero en cualquier caso esta es mi contribución.

Accidentalmente tropecé con una solución para este problema: establecer el canal alfa del color de la cuadrícula para que sea totalmente transparente. Por ejemplo:

var options = { 
     grid: {show: true, 
       color: "rgb(48, 48, 48)", 
       tickColor: "rgba(255, 255, 255, 0)", 
       backgroundColor: "rgb(255, 255, 255)"} 
    }; 

Funciona para mí.

6

Para evitar marcas en las opciones, simplemente marque: [] en el eje correspondiente

Cuestiones relacionadas