Muhtemelen kendine özgü barchart'ı merak ettiğinizi biliyor musunuz? Neden mevcut bir kütüphane değil? Ben sadece 500 gerekli iken 20000 satır kod ile dosyaları kullanmaktan nefret ediyorum.Kendi oluşturduğunuz barchart'a efsaneler ekleme
Oh ve eğlenceliydi :) Ana hedef, Phonegap kullanarak yapacağım bir uygulama için bu senaryoyu kullanacağım. Böylece boyut ne kadar düşükse o kadar iyidir. 
Ben ebeveynin yüksekliğine bağlıdır onlar eşit genişliktedir emin olun, barlar çizmek mümkün ve onların yüksekliğe sahip ettik:
Yani fikri şu elde etmektir bir kap. Aşağıdaki kodda göreceğiniz gibi, seçeneklere yazı tipi boyutu da ekledim. Bazı grafikler 300px'lik bir yükseklik kadar genişleyeceğinden (örneğin varsayılan 16px'i kullanacaklardır). Ve sadece 12 veya daha az font boyutuna sahip 50px. Bu yüzden üst için yeterli alan (miktarlar) & alt (efsaneler + başlık)
Şimdi nasıl ekleneceği tamamen emin değilim olduğundan emin olmak için 3 x fontSize (+ dinlenme) tarafından çubuk ChartContainer azaltılmış ve miktarları ortalayın. Tüm bunların nasıl oluşturulduğunu kontrol etmek için varolan grafik kitaplıklarını aramayı denedim, ne yazık ki hepsi kundakçıları veya SVG kaplarını kullanıyorlar. Baska öneri?
/* dataset
------------------
add legends
add result/amount
add bottom-border: 8px extra to both sides?
add chart name
*/
(function ($) {
var methods = {
init : function(options) {
return this.each(function() {
var $this = $(this),
dataset = options.dataset,
fontSize = options.fontSize,
widthOfContainer = $this.width(),
heightOfContainer = $this.height() - (3 * (fontSize + 4)), // make room for title (bottom), legend (bottom), amounts (top)
widthOfBar = parseInt(widthOfContainer/options.dataset.length) - 2,
bar;
$this.bind('draw', function(e) {
$this.empty();
var maxValueInDataset = Math.max.apply(Math, dataset.map(function(o){return o.a;})),
heightPerUnit = parseInt(heightOfContainer/maxValueInDataset);
for (var i = 0; i < dataset.length; i++) {
bar = $(document.createElement('div'));
bar.addClass('bar');
bar.css({
'height': parseInt(dataset[i].a * heightPerUnit) + 'px',
'width': parseInt(widthOfBar) + 'px',
'margin-left': parseInt(i * 2 + i * widthOfBar) + 'px',
'bottom': 2 * (fontSize + 4)
});
$this.append(bar);
}
});
$this.trigger('draw');
});
},
draw : function(n) {
$(this).trigger('draw');
}
};
$.fn.chart = function(methodOrOptions) {
if (methods[methodOrOptions]) {
return methods[ methodOrOptions ].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof methodOrOptions === 'object' || ! methodOrOptions) {
// Default to "init"
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + methodOrOptions + ' does not exist on jQuery.tooltip');
}
};
$(document).ready(function(){
$('div.barchart').chart({
// Add font-size?
fontSize: 14,
name: 'mana cost',
dataset: [
{a: 2, label: '0'},
{a: 8, label: '1'},
{a: 9, label: '2'},
{a: 4, label: '3'},
{a: 7, label: '4'},
{a: 3, label: '5'},
{a: 1, label: '6'},
{a: 1, label: '7'},
{a: 2, label: '8'},
{a: 5, label: '9'}
]
});
});
}(jQuery));/* Barchart
========================================================================== */
.barchart {
color: black;
}
/* Bar
========================================================================== */
.bar {
position: absolute;
height: 0px;
width: 0px;
margin-left: 0px;
bottom: 0px;
background: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding: 20px;">
<div class="barchart" style="height: 100px; position: relative"></div>
</div>
Bu hiç: (yaklaşık 30 vanilya js hatları ve gerekirse kolayca jquery yaklaşımına uyum sağlayabilir css, birkaç satır içinde)
bir çalışma demo Bir cevap da yok! teşekkürler, bir göz atacağız. – Goowik