为jQuery Sparklines插件的每个值添加字符串标签

Question

我正在为一个Web应用程序实现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'
        });
    });

谢谢！

- Ismailp

---

请参见文档版本2 - tooltipPrefix。这是一个字符串，用于在工具提示中显示的每个字段前面添加前缀，或者可以使用tooltipFormatter函数。 - Haim Evgi

太棒了！我会将正确的代码发布为答案 :) - Ismailp

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

- gareth

---

使用以下链接 http://jsfiddle.net/gwatts/ckabau8u/ 作为条形图的参考。 - gnganapath

为 offset 占位符点赞。 - Kishor Pawar

Answer 2

我也使用Bootstrap，在使用过程中遇到了一个问题，就是无法看到工具提示：

将box-sizing全局设置为border-box会导致工具提示显示不正确。这个问题可以通过在Bootstrap之后添加以下CSS来解决。随着box-sizing的更加频繁使用，这可能会成为一个问题。

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

这是链接。 https://github.com/gwatts/jquery.sparkline/issues/89

- captainhero70

---

这是修复Bootstrap使用问题的方法。已验证 - FlyingV

Answer 3

这是一个带有自定义标签的饼图的工作示例。 点击这里查看。

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

- techarch