向jQuery的每個值添加字符串標籤Sparklines插件

我正在爲正在開發的Web應用程序實現jQuery Sparklines插件。我想爲餅圖值添加標籤，因此當您將鼠標懸停在特定圖表上時，您將選擇「Automotive（25％）」，而不是默認的int值「（25％）」。向jQuery的每個值添加字符串標籤Sparklines插件

任何想法如何做到這一點？

這裏是我的代碼：

$(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' 
     }); 
    });

謝謝！

來源

2012-05-09 Ismailp

在文檔版本看到2 - tooltipPrefix \t一個字符串，放在在工具提示中顯示的每個字段，或tooltipFormatter功能， –

真棒！我將發佈正確的代碼作爲答案:) – Ismailp

使用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 
      } 
     } 
    }); 
});

這裏是爲迷你圖文檔的鏈接上述方法：http://omnipotent.net/jquery.sparkline/#tooltips

來源

2012-05-09 22:29:23 gareth

謝謝，正是我所期待的！ –

是的。這是我的預期。謝謝它的工作。 – gnganpath

爲條形圖spakline使用鏈接http://jsfiddle.net/gwatts/ckabau8u/作爲參考 – gnganpath

這裏是一個餅圖自定義的工作示例標籤

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

來源

2013-06-08 17:11:32 techarch

我也用引導，我就遇到了這個問題，我看不到提示：

全局設置框大小調整到邊界框使工具提示中顯示不正確。這可以通過引導後的以下css修復。這可能會成爲一個問題，因爲盒子尺寸更常用。

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

這是鏈接。 https://github.com/gwatts/jquery.sparkline/issues/89

來源

2014-03-06 15:01:07 captainhero70

這是修復如果您使用Bootstrap。驗證 – FlyingV

向jQuery的每個值添加字符串標籤Sparklines插件

回答

相關問題