Javascript 向jQuery Sparklines插件的每个值添加字符串标记

我正在为我正在开发的web应用程序实现插件。我想向饼图值添加标记，这样当您将鼠标悬停在特定图表上时，您将使用“Automotive（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'
        });
    });

---

谢谢

使用ToolTipRefix或编写自己的格式化程序的更好替代方法是使用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
            }
        }
    });
});

$（函数（）{
var MyValue=[10,8,5,7,4,4,1]；
$（“#sparkline”）。sparkline（myvalues{
键入“pie”，
宽度：“200px”，
高度：“200px”，
切片颜色：['5d3092'、'4dc9ec'、'9de49d'、'9074b1'、'66aa00'、'dd4477'、'0099c6'、'990099']，
边界宽度：7，
边框颜色：'#f5'，
tooltipFormat:“●；{{offset:names}}（{{percent.1}}%）”，
工具提示值查找：{
姓名：{
0:‘汽车’，
1:"机车",，
2:‘没有动力’，
三:"三",，
四:"四",，
5:‘五’
//在这里添加更多
}
}
});
});

---

这里有一个指向上述方法的Sparkline文档的链接：

这里是一个带有自定义标签的饼图的工作示例

---

我也使用引导，遇到这个问题时，我看不到工具提示：

全局设置框大小为边框框会导致工具提示显示不正确。这可以通过以下css在引导后修复。这可能会成为一个问题，因为框大小的使用更加频繁

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

这是链接。

---

请参见文档第2版-ToolTipRefix，在工具提示或tooltipFormatter函数中显示的每个字段前添加一个字符串！我将发布正确的代码作为答案：）谢谢，正是我在寻找的！对于条形图spakline，请使用引用链接Humbs up以获得

偏移量

占位符。如果使用引导，这是一个修复方法。已证实的

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