ウェブサイト上の棒グラフ

Question

私は決してWebデザイナーではありませんので、喜んで提供したいと思います。

私は0-100％の棒グラフを使って入力するデータを追跡するウェブサイトを作りたいと思っています。私は、グラフが行くことができる最大数を入力し、いくつかのデータポイントは時折更新され、補完棒グラフが反映されます。

どうすればいいですか？

私は基本的なHTMLとPHPを知っていますが、非常に長い間使っていません。

Answer 1

私は提案のほとんどはやり過ぎだと思う。すべての余分なライブラリ/依存関係を持つ必要性を全くあなたはいくつかの簡単なバーグラフである必要平野HTML/CSSが何をすべき...

PS：。迅速なコードサンプル、唯一のFirefox 3.xので

<style type="text/css"> 
.bar 
{ 
    background-color: green; 
    position: relative; 
    height: 16px; 
    margin-top: 8px; 
    margin-bottom: 8px; 
} 
</style> 

<div id="barcontainer" style="width:200px;"> 
    <div id="bar1" class="bar" style="width:43%;"></div> 
    <div id="bar2" class="bar" style="width:12%;"></div> 
    <div id="bar3" class="bar" style="width:76%;"></div> 
    <div id="bar4" class="bar" style="width:100%;"></div> 
</div> 

をテストあなたがして簡単に個々のバーの幅を変更することができますjavascript（幅を変更するだけ）

Answer 2

私はあなたが新しいと言ったことは知っていますが、Googleの視覚化APIを見てください。あなたが望むかもしれない種類のことをするには、良いものがあります。
http://code.google.com/apis/visualization/

Answer 3

この問題に対処する方法は2つあります。バックエンドでグラフを生成してください（おそらくあなたの場合はPHPを使用しています）。あるいは、javascriptを使用してクライアント側でグラフを作成します。

私は実際にその言語を知らないので、PHPでそれを行うのはよく分かりませんが、PHPのグラフ生成に関する情報がたくさんあると確信しています。

javascriptのアプローチでは、前にflot（jquery用）とflotr（プロトタイプ用）の両方を使用しました。私はそれらが大好きです、両方の図書館には、棒グラフを含むあらゆる種類の図を生成するための良いドキュメンテーションと例があります。

Answer 4

PHPを使用するだけで簡単に使えるようにするには、GDのPHPライブラリを使用できます。

汎用グラフィックスライブラリです。

バーグラフを作成する方法を示すhereの例があります。

Answer 5

あなたは多くのプログラミングを行うにはしたくない場合は、必ずGoogleスプレッドシート内のグラフを作成することができ、その後、ちょうどパブリッシュ/あなたのウェブサイトでグラフを埋め込む：

http://googlesystem.blogspot.com/2007/04/google-spreadsheets-charts.html

Answer 6

私はあなたの質問を解釈していますあなたのウェブサイトに棒グラフを入れたいとします。 ExtJSは棒グラフ（http://extjs.com/deploy/dev/examples/chart/reload-chart.html)の良い実装を持っていません。主な欠点は、あなたがjavascriptのビットを学ぶ必要があるということです。

Answer 7

多分あなたはD3を見てください。 この問題については本当に素晴らしいです。

http://d3js.org/