jQueryは画像の累積高さを取得し、ピクセルオフセットに基づいて高さを調整します

Question

私は、pdfの簡単な印刷用にHTMLベースのスタッキングバーチャートを作成する必要があります。私はカラーブロック画像に小数点以下のパーセンテージを割り当てることでそうしました。サードパーティのライブラリはオプションではありません。これは、私がSafari以外でサポートしなければならないすべてのブラウザに役立ちます。データが正確で、これはちょっと目立ちました...私はちょうどそれを "裁断する"ことを望みます。

1. 私は、これはパーセンテージであるので、私は単なるラッパーを取得することはできません
2. 私の棒グラフの高さは、私が結合されたすべての私のイメージの高さの合計が（それは595pxだと言うことができます）必要常に600PX
3. 知っているheight()
4. 高さを残してから、それぞれの画像を反復して、高さをheight() + 1pxに設定して合計が600pxに達するまでしたいと思います。私の事例では、5枚の画像を繰り返して1枚ずつ追加することを意味します。

グッドバーチャート VS. サファリバーチャート

例HTML：

<div class="bar-container"> 
    <div class="inner-barstack"> 
     <img src="my/color-square" style="height:41.5%" alt="Bifid... 41.5%"> 
     <img src="my/color-square" style="height:39.32%" alt="Clost... 39.32%"> 
     <img src="my/color-square" style="height:0.68%" alt="Corio... 0.68%> 
     <img src="my/color-square" style="height:0.5%" alt="Veill... 0.5%"> 
     <img src="my/color-square" style="height:0.5%" alt="Enter... 0.5%"> 
     <img src="my/color-square" style="height:0.5%" alt="Bacte... 0.5%"> 
     <img src="my/color-square" style="height:17%" alt="Lacto... 17%"> 
    </div> 
</div> 

例のCSS：

.bar-container { 
    height: 600px; 
    width: 80px; 
} 
.inner-barstack { 
    height: 100%; 
    width: 100%; 
} 
.inner-barstack img { 
    width: 100%; 
} 

Answer 1

明示的にあなたの高さを定義する必要がある場合、次のことができますパーセンテージを格納するデータ属性で直接高さを割り当てることができます。

<img src="my/color-square" data-pct="41.5" alt="Bifid... 41.5%"> 

<script> 
var imgs = document.querySelectorAll('[data-pct]') 
var len = imgs.length 
var i = -1 
var t, pct 

while(++i < len){ 
    t = imgs[len] 
    pct = parseFloat(t.getAttribute('data-pct'))/100 
    t.style.height = [pct * 600, 'px'].join("") 
} 
</script>