bootstrap - javascript chart library

Agregar etiquetas de cadena a cada valor del complemento jQuery Sparklines

Question

Estoy implementando el complemento jQuery Sparklines para una aplicación web que estoy desarrollando. Quiero agregar etiquetas a los valores de los gráficos circulares para que cuando se desplace sobre ese gráfico específico, seleccione " Automoción (25%)" en lugar del valor int predeterminado " 1 (25%)".

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

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

Este es un ejemplo práctico de un gráfico circular 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 2

También uso bootstrap, me encontré con este problema donde no podía ver la información sobre herramientas:

Al establecer globalmente el tamaño del cuadro en el cuadro de borde, la información sobre herramientas se muestra incorrectamente. Esto puede ser arreglado por el siguiente css después de bootstrap. Esto puede convertirse en un problema ya que el tamaño de la caja se usa con más frecuencia.

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

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

Answer 3

Una mejor alternativa para usar tooltipPrefix o escribir su propio formateador es usar tooltipFormat y tooltipValueLookups en lugar de asignar 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 de Sparkline para los métodos anteriores: http://omnipotent.net/jquery.sparkline/#tooltips