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

Я реализую плагин jQuery Sparklines для веб-приложения, которое я разрабатываю. Я хочу добавить теги к значениям круговой диаграммы, поэтому, когда вы наводите курсор на этот конкретный график, вы будете " Автомобильная (25%)" вместо значения по умолчанию " 1 (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'
        });
    });

Спасибо!

Ответ 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/#tooltips

Ответ 2

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

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

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

Здесь ссылка. https://github.com/gwatts/jquery.sparkline/issues/89

Ответ 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'
        }
    },
});