Agregando etiquetas de cadena a cada valor del plugin jQuery Sparklines

Question

Estoy implementando el plugin jQuery Sparklines para una aplicación web que estoy desarrollando. Quiero agregar etiquetas a los valores del gráfico circular para que cuando pase el puntero sobre ese gráfico específico busque "Automotriz (25%)" en lugar del valor int predeterminado " (25%)".

¿Alguna idea sobre cómo esto podría hacerse?

Aquí está el código que tengo:

$(function(){ 
     var myvalues = [10,8,5,7,4,4,1]; 
     $('#sparkline').sparkline(myvalues, { 
      type: 'pie', 
      width: '200px', 
      height: '200px', 
      sliceColors: ['#5d3092', '#4dc9ec', '#9de49d', '#9074b1', '#66aa00', '#dd4477', '#0099c6', '#990099'], 
      borderWidth: 7, 
      borderColor: '#f5f5f5' 
     }); 
    }); 

Gracias!

Answer 1

Una mejor alternativa al uso de tooltipPrefix o escribir su propio formateador es utilizar tooltipFormat y tooltipValueLookups lugar para mapear el índice en su matriz de valores a un nombre:

$(function() { 
    var myvalues = [10,8,5,7,4,4,1]; 
    $('#sparkline').sparkline(myvalues, { 
     type: 'pie', 
     width: '200px', 
     height: '200px', 
     sliceColors: ['#5d3092', '#4dc9ec', '#9de49d', '#9074b1', '#66aa00', '#dd4477', '#0099c6', '#990099'], 
     borderWidth: 7, 
     borderColor: '#f5f5f5', 
     tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)', 
     tooltipValueLookups: { 
      names: { 
       0: 'Automotive', 
       1: 'Locomotive', 
       2: 'Unmotivated', 
       3: 'Three', 
       4: 'Four', 
       5: 'Five' 
       // Add more here 
      } 
     } 
    }); 
}); 

Aquí hay un enlace a la documentación Sparkline para los métodos anteriores: http://omnipotent.net/jquery.sparkline/#tooltips

Answer 2

Aquí es un ejemplo de trabajo de unos gráficos circulares con etiquetas personalizadas

http://jsfiddle.net/gwatts/ak4JW/

// jsfiddle configured to load jQuery Sparkline 2.1 
// http://omnipotent.net/jquery.sparkline/ 
// Values to render 
var values = [1, 2, 3]; 

// Draw a sparkline for the #sparkline element 
$('#sparkline').sparkline(values, { 
    type: "pie", 
    // Map the offset in the list of values to a name to use in the tooltip 
    tooltipFormat: '{{offset:offset}} ({{percent.1}}%)', 
    tooltipValueLookups: { 
     'offset': { 
      0: 'First', 
      1: 'Second', 
      2: 'Third' 
     } 
    }, 
}); 

Answer 3

También uso de arranque, me encontré con este problema por el que no pude ver la información sobre herramientas:

A nivel mundial se ajusta la caja de dimensionamiento de la frontera-box provoca información sobre herramientas que se muestra de forma incorrecta. Esto se puede solucionar con el siguiente CSS después del arranque. Esto puede convertirse en un problema ya que el tamaño de caja se utiliza con mayor frecuencia.

.jqstooltip { box-sizing: content-box;} 

Aquí está el enlace. https://github.com/gwatts/jquery.sparkline/issues/89