javascript - 絶対配置された li 要素を使用した棒グラフの作成

Question

<li>要素を含む「棒グラフ」を作成しようとしています:

<li>s を垂直の「バー」として表示するために、下から上にabsoluteとで配置しましたbottom: 0px。今、私はそれを次のように手動で動作させています:

#graph {
    height: 300px;
    width: 400;
    border-bottom: 1px solid #CCC;
    position: relative;
}
#graph ul li {
    background: #0071bc;
    height: 200px;     /* the height will eventually be dynamic */
    width: 100px;
    display: block;
    position: absolute;
    bottom: 0px;
}
#graph ul li:nth-child(1) { left: 10px; }
#graph ul li:nth-child(2) { left: 130px; }
#graph ul li:nth-child(3) { left: 250px; }    /* and so on and so forth */

ここにjsfiddleがあります

要素はこの<li>ように 20px で区切られています。ここで計算できます。リストにエクストラを追加したいときに問題が発生し<li>ます。それは次のようになります:別の jsfiddle

問題が見えますか？

これで、余分に対応するために CSS を追加できますが、<li>これを毎回行わなければならないのは面倒で非効率的です。

解決策はありますか？