Javascript 为 jQuery Sparklines 插件的每个值添加字符串标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10512842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding string tags to each value of jQuery Sparklines plugin
提问by Ismailp
I'm implementing jQuery Sparklinesplugin for a web app I'm developing. I want to add tags to the pie chart values so when you hover over that specific chart you will se "Automotive(25%)" instead of the default int value "1(25%)".
我正在为我正在开发的 Web 应用程序实现jQuery Sparklines插件。我想为饼图值添加标签，因此当您将鼠标悬停在该特定图表上时，您将看到“ Automotive(25%)”而不是默认的 int 值“ 1(25%)”。
Any ideas on how this could be done?
关于如何做到这一点的任何想法？
Here is the code I have:
这是我的代码：
$(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'
});
});
Thanks!
谢谢！
回答by gareth
A better alternative to using tooltipPrefix or writing your own formatter is to use tooltipFormat and tooltipValueLookups instead to map the index in your array of values to a name:
使用 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}}">●</span> {{offset:names}} ({{percent.1}}%)',
tooltipValueLookups: {
names: {
0: 'Automotive',
1: 'Locomotive',
2: 'Unmotivated',
3: 'Three',
4: 'Four',
5: 'Five'
// Add more here
}
}
});
});
Here's a link to the Sparkline docs for the above methods: http://omnipotent.net/jquery.sparkline/#tooltips
以下是上述方法的 Sparkline 文档的链接：http: //omnipotent.net/jquery.sparkline/#tooltips
回答by captainhero70
I also use bootstrap, I ran into this issue where I couldn't see the tooltip:
我也使用引导程序，我遇到了看不到工具提示的问题：
Globally setting box-sizing to border-box causes tooltip to be displayed incorrectly. This can be fixed by the following css after bootstrap. This may become an issue as box-sizing is more frequently used.
将 box-sizing 全局设置为 border-box 会导致工具提示显示不正确。这可以在引导后通过以下 css 修复。这可能会成为一个问题，因为更频繁地使用 box-sizing。
.jqstooltip { box-sizing: content-box;}
Here's the link. https://github.com/gwatts/jquery.sparkline/issues/89
回答by techarch
Here is a working example of a pie charts with custom labels
这是带有自定义标签的饼图的工作示例
http://jsfiddle.net/gwatts/ak4JW/
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'
}
},
});
