javascript - 向 jQuery Sparklines 插件的每个值添加字符串标签

Question

我正在实现jQuery Sparklines我正在开发的网络应用程序的插件。我想向饼图值添加标签，这样当您将鼠标悬停在该特定图表上时，您将看到“汽车 (25%)”，而不是默认的 int 值“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'
        });
    });

谢谢!

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/#tooltips