sparklines条形图拟合

sparklines bar graph fit

本文关键字：拟合 条形图 sparklines      更新时间：2023-09-26

我正在使用sparklines包http://omnipotent.net/jquery.sparkline/#s-关于

我试图使sparklines条形图适合预先定义的大小，但我有很多图表，理想情况下这应该是动态的。

我正在尝试类似的东西：

$.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);，但这留下了大约10像素的悬置。

有什么想法吗？

它永远不会完美匹配，因为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参数来减少圆角棒宽度与父宽度的乘积之间的差异。

相关文章：