Cómo mostrar información sobre herramientas en el gráfico circular jqplot

Question

Tengo un gráfico circular jqplot con una leyenda y me gustaría que el texto de la leyenda aparezca como información sobre herramientas cuando el mouse se mueve sobre los pasteles. No estoy seguro de cómo hacer eso. ¿Alguien tiene alguna experiencia haciendo algo similar?

código de ejemplo:

$(document).ready(function(){ 
    var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]]; 
    var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
     seriesDefaults: { 
     renderer: jQuery.jqplot.PieRenderer, 
     rendererOptions: { 
      showDataLabels: true 
     } 
     }, 
     legend: { show:true, location: 'e' } 
    } 
); 
}); 

Answer 1

Debe vincular los eventos de resaltado y desaparición de datos jqplot, tomar los datos que desea mostrar y establecer el cuadro que contiene el atributo de título de div.

El código siguiente muestra el título en el formato de "x: y", donde x es la etiqueta de leyenda y y es el valor:

var plot = $.jqplot('plotDivId',...); 

$("#plotDivId").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { 
      var $this = $(this);     

      $this.attr('title', data[0] + ": " + data[1]);        
     }); 

$("#plotDivId").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { 
      var $this = $(this);     

      $this.attr('title',""); 
}); 

Esta pieza de código está siendo utilizado en mi sistema que funciona sin problemas

Answer 2

No creo que hay una construida en esto. Deberá vincular los manejadores a los eventos 'jqplotDataHighlight' y 'jqplotDataUnhighlight'. Vea el ejemplo en la parte inferior de este page. Esto lo hace con diagramas de burbujas, pero también debería traducirse en diagramas de tarta.

Answer 3

estoy usando la versión más reciente de jqPlot y consiguió la información sobre herramientas para trabajar sólo por el uso de la sección siguiente "seriesDefaults" dentro:

highlighter: { 
    show: true, 
    formatString:'%s', 
    tooltipLocation:'sw', 
    useAxesFormatters:false 
} 

La parte importante es "useAxesFormatters: true" ya que no hay ejes en un gráfico circular. Siéntete libre de cambiar "formatString" a lo que quieras, pero para mí, solo "% s" muestra exactamente la misma cadena que aparece en las leyendas.

Answer 4

estoy usando la versión del plug-in rotulador en el siguiente enlace:

https://github.com/tryolabs/jqplot-highlighter

Los parámetros que estoy usando:

highlighter: { 
    show:true, 
    tooltipLocation: 'n', 
    tooltipAxes: 'pieref', // exclusive to this version 
    tooltipAxisX: 20, // exclusive to this version 
    tooltipAxisY: 20, // exclusive to this version 
    useAxesFormatters: false, 
    formatString:'%s, %P', 
} 

los nuevos parámetros de asegurar un lugar fijo donde la información sobre herramientas aparecerá. Prefiero colocarlo en la esquina superior izquierda para evitar problemas al cambiar el tamaño del contenedor div.

Answer 5

Como no pude hacer que el resaltador funcionara, no se mostró nada en el gráfico circular, terminé con la solución para mostrar una información sobre herramientas del navegador basada en el evento highligter.

var plot1 = jQuery.jqplot ('chart1', [data], { 
seriesDefaults: { 
    renderer: jQuery.jqplot.PieRenderer 
    } 
} 
); 

$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { 
    document.getElementById('chart1').title = data; 
    //alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
    });