2

私はテーブルを持っています:

1-joe-234
2-bob-432
3-sean-654

それを棒グラフにしたいと思います。

ネット上に lib がないわけではありませんが、プロトタイプまたはフラッシュ xml ファイルです。

--

私が取り組んでいるソリューションは、Googleチャートのhtmlリンクを生成するjqueryプラグインです...きれいではありませんが、KISS（本当にシンプル）で醜いです。

--

これが私のインスピレーションの 1 つです: http://www.dumpsterdoggy.com/articles/?jquery-horizo​​ntal -bar-graph

4

3 に答える 3

1

これは完全に JavaScript であるため、他の形式のデータがある場合は、最初に JS に変換する必要があります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div id="bars"></div>
<script type="text/javascript">
//<![CDATA[
    $(function (){
      var values = [234, 654, 432];
      var maxValue = values[0];
      for(var i = 0; i < values.length; i++){
        maxValue = Math.max(maxValue, values[i]);
      }

      for(var i = 0; i < values.length; i++){
        var newBar = $("<span>").html(values[i]);
        newBar.css({
          "display": "block",
          "width": "0px",
          "backgroundColor": "#600",
          "marginBottom": "5px",
          "padding": "2px",
          "color": "#FFF"
        });

        $("#bars").append(newBar);

        newBar.animate({"width": (100 * values[i] / maxValue) + "%"}, "slow");
      }
    });
//]]>
</script>

Opera 10 で書かれ、テストされました。

もちろん、素敵な背景、バー間の余白、テキストの色など、可能なすべての CSS ルールを別のファイルで調整した方がよいでしょうが、これは単なるデモです。

于 2009-03-18T00:00:07.180 に答える
0

以下はトリックを行う必要があります。この例は、まさにこのページに対して機能します。ブックマークレットを作成してテストしました。IEでは、中央に配置されているように見えます。これは、ページのスタイル設定の一部である可能性があります。とにかく、キーは最初のセレクターです。そのセレクターによって選択される要素はすべて、テーブルのデータとして使用される要素です。

var values = [];
$('.item-multiplier').each(function() {
  var t = $(this).text().match(/\d+/);
  if (t) values.push(parseInt(t));
});

var maxValue = values[0];
for(var i = 0; i < values.length; i++)
    maxValue = Math.max(maxValue, values[i]);


for(var i = 0; i < values.length; i++){
    var newBar = $("<span>")
         .html(values[i])
         .css({
      "display": "block",
      "width": "0px",
      "backgroundColor": "#600",
      "marginBottom": "5px",
      "padding": "2px",
      "color": "#FFF"
     });

$("body").append(newBar);
var w = Math.floor((100 * values[i] / maxValue)) + "%";
newBar.animate({"width":w}, "slow");
}
于 2009-03-20T01:32:00.600 に答える