पर किंवदंतियों को जोड़ना मुझे पता है कि आप शायद स्वयं निर्मित ब्रैचर्ट सोच रहे हैं? मौजूदा पुस्तकालय क्यों नहीं? खैर मुझे कोड की 20000 लाइनों के साथ फ़ाइलों का उपयोग करने से नफरत है जबकि केवल 500 आवश्यक हैं।आत्मनिर्भर barchart
ओह और यह मजेदार है :) मुख्य उद्देश्य यह है कि मैं इस स्क्रिप्ट का उपयोग ऐसे ऐप के लिए करूँगा जो मैं फोनगैप का उपयोग करूँगा। तो आकार कम, बेहतर। 
मैं माता-पिता की ऊंचाई पर निर्भर सलाखों आकर्षित करने के लिए करने के लिए, सुनिश्चित करें कि वे समान चौड़ाई के कर रहे हैं सक्षम किया गया और उनकी ऊंचाई है है:
तो विचार निम्नलिखित प्राप्त करने के लिए है कंटेनर। जैसा कि आप नीचे दिए गए कोड में देखेंगे, मैंने विकल्पों में फ़ॉन्ट-आकार भी जोड़ा है। चूंकि कुछ चार्ट 300px की ऊंचाई का विस्तार करेंगे (उदाहरण के लिए डिफ़ॉल्ट 16px का उपयोग करेंगे)। और कुछ केवल 50 पीएक्स 12 या उससे कम के फ़ॉन्ट आकार के साथ। तो मुझे यकीन है कि शीर्ष के लिए पर्याप्त जगह (मात्रा) & नीचे (किंवदंतियों + शीर्षक)
अब मैं पूरी तरह से जोड़ने के बारे में यकीन नहीं है वहाँ है बनाने के लिए 3 x fontsize (+ बाकी) द्वारा बार ChartContainer कम और मात्रा को केन्द्रित करें। मैंने मौजूदा चार्ट पुस्तकालयों को खोजने की कोशिश की ताकि यह जांच सके कि यह सब कैसे प्रदान किया गया है, दुर्भाग्यवश वे सभी कैनवास या एसवीजी कंटेनर का उपयोग करते हैं। कोई सुझाव?
/* 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>
यह 'isn एक जवाब का बुरा बुरा! धन्यवाद, इसे देखेंगे। – Goowik