1

この機能の画像例があります。これは、Excel2010のスパークラインで利用できるようになりました。

ここに画像の説明を入力してください

理想的には、各行の最大/最小を示す垂直線も必要です。

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

4

2 に答える 2

2

（それをやりたいだけなら、Googleチャートははるかに速くて簡単になりますが、学びたいのなら、これはかなりクールな小さなプロジェクトのように聞こえます。）

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

幅や境界線などを設定するブラウザの手荷物が多い <div>ので、私はこれに固執します。私はあなたの例の写真の余分な線をすべて無視し（最初はとにかく）、最大と最小の線で、異なる幅の積み重ねられたバーを作成することに焦点を当てます。<table><div>

HTML：

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

CSS：

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 */
}

javascriptでは、すべての、、の幅を設定し、div.valueそれらのテキスト値div.maxにdiv.min基づいて、次のようにします。

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

ここでは多くの詳細をスキップしていますが、これが役立つことを願っています。幸運を！

于 2011-01-30T21:20:01.590 に答える
1

Google Chart Toolsはどうですか？彼らにはたくさんのオプションがあるようです-私たちはプロジェクトでこれを成功裏に使用しました（私は個人的にそれを使用したことはありませんが）。

ここに簡単な例があります（ラベルはあなたが探しているものではありませんが、いくつかの例にはインラインラベルがあります）：

于 2011-01-30T15:54:47.347 に答える