Documentación para el gráfico de la reputación de desbordamiento de pila (Flot)
-
30-09-2019 - |
Pregunta
¿hay alguna documentación disponible para construir el gráfico Flot similar a lo que podemos encontrar en el desbordamiento de pila / pestaña reputación ?
a partir del código fuente que puedo ver que los datos se consulta en la siguiente dirección:. /users/rep-graph/341106/" + ranges.xaxis.from.toFixed(1) + "/" + ranges.xaxis.to.toFixed(1)
pero no sé los valores from
y to
campos en la URL puede aceptar
Editar
En esta gráfica, podemos ver que se ponen de relieve dos puntos, y el resultado es que dos pregunta ??em> se enumeran en el lado, lo que significa que los valores trazados están vinculados con por el usuario datos definidos .
Sin embargo, si considero el ejemplo de pkh, sólo los puntos (y una etiqueta) se proporcionan a Flot:
label: "United States",
data: [[1990, 18.9], [1991, 18.7] ....
Así que me gustaría ver:
- cómo los datos de enlace con los puntos
- cómo actualizar un panel de acuerdo con la selección gráfica [pero tal vez esta parte no es realmente se hace por sí mismo Flot]
Solución
En este caso, están pasando Javascript marcas de tiempo de vuelta a través de la URL.
Así que en el lado de back-end, que deben estar haciendo algo como esto (pseudocódigo):
//get parameters from URL, non-rails people would just use POST or GET variables
$from = $_GET['from']
$to = $_GET['to']
//convert to timestamps in your language
$from = $from/1000
$to = $to/1000
//query your data source with these time-based restrictions
//return a JSON data set with the given restrictions, linking the known timestamps to labels
Para su segunda pregunta, tiene su lado servidor devuelve un array asociativo, la vinculación de la marca de tiempo a un objeto de datos, que en este caso contiene ganancia, pérdida, URL, título. En la devolución de llamada de éxito, los visualiza. Aquí está un objeto de datos de ejemplo:
{ 1274774400000 : {
Gain:0,
Loss:10,
Url:'http://asdf.com',
Title:'We lost some rep here... boohoo'
},
1274947200000 : {
Gain:10,
Loss:0,
Url:'http://asdf.com',
Title:'We gained some rep here... woo!'
}
}
Se puede ver este tipo de objeto que se utiliza en la función showReputation
en la página al que hizo referencia ... excepto volvieron una matriz JSON en lugar de un objeto.
Otra característica que podría agregar fácilmente dado el anterior objeto de datos:. Plotclick un evento que pone de relieve el punto de datos dada cuando el clic que
Otros consejos
Parece como si estuvieran usando el plugin de selección de flot. He aquí una ejemplo básico de su uso .
ranges
es un argumento al controlador de plotselected
, y así from
y to
pueden ser cualquier valor válido para el eje dado. (Selección puede ser a lo largo de x, y, o (X e Y) ejes.)