我正在使用迷你图包http://omnipotent.net/jquery.sparkline/#s-about
我正在尝试使迷你图条形图适合预先确定的大小,但是我有很多图表,理想情况下这应该是动态的。
我正在尝试类似:
$.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);
用于说明间距。问题是,它安装不正确。特别是当条形图中有很多这样的条形时。
它应该恰好使用370像素,但在一种情况下,它使用363像素,在另一种情况下,则使用281像素。
我试着只是做
parseInt(370) / l);
,但留下大约十个像素的突出部分。有什么想法吗?
最佳答案
因为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与父宽度的乘积之间的差异。