迷你條形圖適合

我使用的是迷你包http://omnipotent.net/jquery.sparkline/#s-about 迷你條形圖適合

我試圖讓迷你柱狀圖擬合到predemined大小，但我有很多圖表，最好這應該是動態的。

我想是這樣的：

$.each(sparklines, function(index, sparkline) { 
    var sparkline = $(sparkline); 
    var data_out = sparkline.attr('data'); 
    $.getJSON('/search/histogram/?histo_field=' + data_out, function (data) { 
     var width = sparkline.width(); 
     var data_obj = data.data; 
     var l = data_obj.length; 
     var pixel_width = parseInt((370-l)/l); 
     sparkline.sparkline(data_obj, {type: 'bar', "barWidth":pixel_width,"height":50}) 
     }); 
});

的parseInt((370-l)/l);是佔空間。

問題是，它不適合正確。特別是當條形圖中有很多這樣的條形。

應該使用完全相同370px，但在一個情況下，它使用363px和其他它使用281

我試着只是做parseInt(370)/l);但還有大約十PX的過剩。

有什麼想法？

來源

2013-08-06 James R

我現在有同樣的問題。你有沒有找到一個好的解決方案？ – toabi

它永遠不會完全適合，因爲count * (width + spacing)的倍數可能永遠不會完全填滿寬度，因爲它們被舍入爲整數值。

我現在使用的最佳逼近看起來就像那樣。（有一些額外的代碼從數據屬性讀取設置。）

var $el = $(el); 

var values = $el.data('values').split(',').map(parseFloat); 
var type = $el.data('type') || 'line' ; 
var height = $el.data('height') || 'auto'; 

var parentWidth = $el.parent().width(); 
var valueCount = values.length; 
var barSpacing = 1; 

var barWidth = Math.round((parentWidth - (valueCount - 1) * barSpacing)/valueCount); 

$el.sparkline(values, {width:'100%', type: type, height: height, barWidth: barWidth, barSpacing: barSpacing});

唯一剩下的優化將與barSpacing參數被打減少圓形barWidths的產品和父寬度之間的差。

來源

2014-01-30 13:54:07 toabi

「var parentWidth = $ el.parent（）。width（） - paddingSize;」如果你有填充。 –

迷你條形圖適合

回答

相關問題