Tôi biết bạn có thể tự hỏi barchart tự làm? Tại sao không phải là thư viện hiện có? Tôi ghét sử dụng các tệp có 20.000 dòng mã trong khi chỉ cần 500 mã.Thêm truyền thuyết vào barchart tự tạo
Oh và thật thú vị :) Mục tiêu chính là tôi sẽ sử dụng tập lệnh này cho ứng dụng tôi sẽ thực hiện bằng Phonegap. Vì vậy, kích thước càng thấp thì càng tốt.
Vì vậy, ý tưởng là để đạt được những điều sau đây: 
tôi đã có thể để vẽ các quán bar, chắc chắn rằng họ đang có chiều rộng bằng nhau và có chiều cao của họ phụ thuộc vào chiều cao của phụ huynh thùng đựng hàng. Như bạn sẽ thấy trong mã bên dưới, tôi cũng đã thêm kích thước phông chữ vào các tùy chọn. Như một số biểu đồ sẽ mở rộng khoảng 300px chiều cao (mà sẽ được sử dụng mặc định 16px ví dụ). Và một số chỉ có 50px với kích thước phông chữ từ 12 trở xuống. Vì vậy, tôi đã giảm thanh ChartContainer bằng 3 x phông chữ (+ phần còn lại) để đảm bảo có đủ không gian cho phần trên cùng (số tiền) & dưới (chú thích + tiêu đề)
Bây giờ tôi không hoàn toàn chắc chắn cách thêm và tập trung số tiền. Tôi đã thử tìm kiếm các thư viện biểu đồ hiện có để kiểm tra xem tất cả các thư viện đã được hiển thị như thế nào, rất tiếc là tất cả chúng đều sử dụng các thùng chứa hoặc các vùng chứa SVG. Bất kỳ đề xuất?
/* 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 này' t xấu của một câu trả lời hoặc! cảm ơn, sẽ xem xét nó. – Goowik