Добавление строковых тегов к каждому значению плагина jQuery Sparklines

Question

Я реализую плагин jQuery Sparklines для разрабатываемого веб-приложения. Я хочу добавить теги к значениям круговой диаграммы, чтобы при наведении указателя мыши на эту конкретную диаграмму вместо "int (по умолчанию)"1 (25%) вместо "int" (по умолчанию) было указано "Automotive (25%)".

Любые идеи о том, как это можно сделать?

Вот код, который у меня есть:

    $(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'
        });
    });

Спасибо!

Answer 1

Лучшая альтернатива использованию tooltipPrefix или написанию собственного средства форматирования - вместо этого использовать tooltipFormat и tooltipValueLookups, чтобы сопоставить индекс в вашем массиве значений с именем:

    $(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
            }
        }
    });
});

Вот ссылка на документы Sparkline для указанных выше методов: http://omnipotent.net/jquery.sparkline/

Answer 2

Я также использую загрузчик, я столкнулся с этой проблемой, где я не мог видеть всплывающую подсказку:

Глобальное задание размера рамки для рамки позволяет некорректно отображать всплывающую подсказку. Это может быть исправлено следующим css после начальной загрузки. Это может стать проблемой, так как размеры ящиков используются чаще.

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

Вот ссылка. https://github.com/gwatts/jquery.sparkline/issues/89

Answer 3

Вот рабочий пример круговой диаграммы с пользовательскими метками

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'
        }
    },
});