jquery - sexto - interpretacion de graficos circulares
Los gráficos circulares de Jquery Flot muestran el valor de los datos en lugar del porcentaje (4)
No puedo averiguar cómo obtener flot.pie para cambiar los datos mostrados en las etiquetas de un porcentaje de los "datos sin procesar" a los datos reales. En mi ejemplo, he creado un gráfico circular con los números de mensajes leídos / no leídos.
Número de mensajes leídos: 50. Número de mensajes no leídos: 150.
La tarta creada muestra el porcentaje de mensajes leídos como 25%. En este punto quiero mostrar los 50 mensajes reales. Ver imagen abajo:
El código que usé para crear el pastel:
var data = [
{ label: "Read", data: 50, color: ''#614E43'' },
{ label: "Unread", data: 150, color: ''#F5912D'' }
];
Y:
$(function () {
$.plot($("#placeholder"), data,
{
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: function (label, series) {
return ''<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'' + label + ''<br/>'' + Math.round(series.percent) + ''%</div>'';
},
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
es posible?
Con la respuesta de @Ryley llegué a una solución sucia. Cuando imprimí la serie.data, se devolvieron los valores "1,150" y "1,50". Se me ocurrió la idea de restar los primeros 2 caracteres del valor devuelto y mostrar el valor restado.
String(str).substring(2, str.lenght)
Este es el gráfico circular que creé con esta solución:
Esta no es la mejor solución, pero funciona para mí. Si alguien sabe una solución mejor ...
Encontré la respuesta a la pregunta. El objeto de datos es una matriz multidimensional. Para obtener los datos reales use el siguiente código:
$(function () {
$.plot($("#placeholder"), data,
{
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: function (label, series) {
return ''<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'' + label + ''<br/>'' + series.data[0][1] + ''</div>'';
},
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
Observe el código "series.data [0] [1]" para extraer los datos.
Esto depende en cierta medida de lo que quieras decir con "En este punto, quiero mostrar los 50 mensajes reales".
Supongamos que desea tener una ventana emergente div cuando mueven el mouse sobre la sección Leer o No leído y luego mostrar los mensajes allí.
El primer paso es hacer que tu gráfico circular sea interactivo. Necesitas agregar la opción de grid así:
legend: {
show: true;
},
grid: {
hoverable: true,
clickable: true
}
A continuación, debe vincular los eventos de clic / desplazamiento a las funciones que recuperan sus mensajes y mostrarlos:
$("#placeholder").bind(''plothover'',function(e,pos,obj){
});
$("#placeholder").bind(''plotclick'',function(e,pos,obj){
if (obj.series.label == ''Read''){
//show your read messages
} else {
//show your unread messages
}
});
¡Eso es!
Ahora, si lo que quiso decir es simplemente que desea mostrar todos los mensajes directamente en el pastel todo el tiempo, solo necesita cambiar su formateador para hacer referencia a una variable global que contiene sus mensajes.
Podrías usar:
formatter: function (label, series) {
return ''<div style="font-size:8pt;text-align:center;padding:2px;color:white;">''+Math.round(series.percent)+"%<br/>" + series.data[0][1] +''</div>'';
},