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

StackOverflow https://stackoverflow.com/questions/1127426

  •  13-09-2019
  •  | 
  •  

質問

私は決してウェブデザイナーですので、あなたが与えるために喜んでいるように私はのように詳細なヘルプをたいと思います。

私は0〜100％のバーグラフを使用して入力したいくつかのデータを追跡するウェブサイトをしたいのですが。私はグラフがに行くことができる最大数を入力したいし、その後いくつかのデータポイントが完了棒グラフを反映した、時々更新されるだろう。

どのように私はこれをやって行くのでしょうか？

私は基本的なHTMLやPHPを知っているが、非常に長い時間のいずれかで使用されていない。

役に立ちましたか？

解決

私は提案のほとんどはやり過ぎだと思います。あなたが必要とするすべては、いくつかの簡単なバーグラフであるとき、余分なライブラリ/依存関係を持ってする必要はありません。プレーン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で簡単に個々のバーの幅を変更することができます。

他のヒント

私はあなたが新しいしていると知っていますが、Googleの可視化APIを見てみる必要があります。あなたが望むかもしれない事のようなものを行うには、いくつかの良いものを持っている。
http://code.google.com/apis/visualization/する

あなたはこの問題に取り組むことができ二つの方法があります。 （おそらくあなたのケースでPHPを使用して）バックエンドのグラフを生成したり、それはJavaScriptを使用してクライアント側で行います。

私は、私は本当に言葉を知っていないとして、PHPでそれをやっての詳細はわからないが、私はPHPでグラフ生成にそこに情報がたくさんあります確信しています。

javascriptのアプローチのために、私が使用した両方の FLOTする（jqueryのための）と flotrする（プロトタイプ用）の前に。私はたくさんそれらを好きで、棒グラフなど、グラフのすべての種類を生成する方法についての両方のライブラリのためのいくつかの良いドキュメントとサンプルがあります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top