5
나는 당신이 아마 각자 제작 한 barchart를 생각하고 있다는 것을 알고 있는가? 왜 기존 도서관이 없습니까? 500 개 밖에 필요하지 않지만 코드 20000 줄의 파일을 사용하는 것은 싫다.자수성 barchart에 전설 추가
아, 재미 있습니다 :) 주요 목표는 Phonegap을 사용하여 만들 수있는 앱에이 스크립트를 사용하는 것입니다. 크기가 작을수록 좋습니다. 
나는 부모의 높이에 따라 그들이 동일한 폭으로되어 있는지 확인, 막대를 그릴 수 있었다 그들의 높이가했습니다
그래서 아이디어는 다음과 달성하는 것입니다 컨테이너. 아래 코드에서 볼 수 있듯이 옵션에 글꼴 크기를 추가했습니다. 일부 차트는 300px 높이로 확장됩니다 (예 : 기본 16px 사용). 글꼴 크기가 12 이하인 글꼴은 50px 밖에되지 않습니다. 그래서 ChartContainer를 글꼴 크기 (+ 나머지) 3 x 줄이면 상단 (금액)에 대한 공간이 충분합니다. & 하단 (범례 + 제목)
어떻게 추가 할 것인지 잘 모르겠습니다. 금액을 중심에 두십시오. 필자는 기존 차트 라이브러리를 검색하여 모든 렌더링 방법을 확인했지만 불행히도 모두 캔버스 또는 SVG 컨테이너를 사용했습니다. 어떤 제안?
/* 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 '(약 30 바닐라 JS의 라인과 필요한 경우 쉽게 JQuery와 접근 방식에 적응할 수 CSS, 몇 줄의)
워킹 데모 응답의 t도 나쁜! 고마워, 그것을 볼 것이다. – Goowik