Javascriptでスパークラインを凌駕するインライン棒グラフを作成するにはどうすればよいですか？

Question

私はここでのExcel 2010のスパークラインで利用可能であり、この機能の画像例を有する：行ごとに最大/最小を示す

理想的には、私は同様に縦線を有したいと。

この効果を得るためのリソース（私はここで学ぶためにここにいる）は素晴らしいでしょう。

Answer 1

（あなたはそれを成し遂げるにしたい場合は、Googleのチャートがなりますはるかに速くて簡単ですが、学習したい場合、これはかなりクールな小さなプロジェクトのように聞こえます）。

主にHTML/CSSに問題があるようです。

<table>には、幅、罫線などの設定を行うブラウザで多くの手荷物がありますので、<div>と貼り付けています。<div>はかなり空白です。私はあなたのサンプル画像（最初は、とにかく）の余分な行をすべて無視して、幅の異なる積み重ね棒を最大と最小の線で作成することに重点を置いています。

HTML：

<div class="row"> 
    <div class="value">5873</div> 
    <div class="min">3049</div> 
    <div class="max">6039</div> 
</div> 

はCSS：JavaScriptで

div { 
    height: 20px; /* You'll want all of the heights to match */ 
} 

div.value { 
    position: absolute; /* All of the inner divs are positioned absolute so they overlap eachother */ 
    -moz-box-shadow: inset 0 0 10px #aaa;  /* basic inset shadow for some dimension - you could make it look however u like with some work */ 
    -webkit-box-shadow: inset 0 0 10px #aaa; 
    box-shadow: inset 0 0 10px #aaa; 
} 
div.min, 
div.max { 
    position: absolute; 
    text-indent: -999em; 
    border-right: 2px solid #000; /* This becomes the indicator for the min/max */ 
} 

、あなたはすべてのdiv.value、div.maxの幅を設定したいとして、そのテキスト値が何であるかに基づいてdiv.minしています、のようなもの：

$('div.value, div.min, div.max').each(function(){ 
    $(this).width($(this).text()/100); 
}); 

私はskippinですここにたくさんの詳細がありますが、うまくいけば、これは役に立ちます。がんばろう！

Answer 2

約Google Chart Tools？彼らはオプションのトンを持っているように見えます - 私たちは成功の私達のプロジェクトでこれを使用しました（私は個人的にそれを使用したことはありません）。

Hereは「（ラベルは、あなたが探しているが、いくつかの例では、インラインラベルを持っているかなり何ではありません）簡単な例をSA：