QNo.63294の続き 棒グラフを動的に作成

質問

お礼を付けると締め切られること忘れてました・・・

画像を一切使わず動的に棒グラフを書きたいと思い、
colspanが動的に出来ないかと質問したのですが、
どうやらNGのようなので再質問。
動的に棒グラフを作成し、その棒グラフ上に文字も表示したいのですが、
どのようにすれば出来るのでしょうか？

ご存知の方、どうぞよろしくおねがいします。

回答No.3

387

スタイルシートを使えばグラフ自体は動的に書けます。
後は、格子状のテーブル上に上手く重ねるのをどうするかですね・・・

例)
<SPAN id="graph1" style="width: 100; background-color: blue">文字</SPAN><BR>
<INPUT type="button" onClick="document.all[ 'graph1' ].style.pixelWidth += 10 ;" value="伸ばす">
<INPUT type="button" onClick="document.all[ 'graph1' ].style.pixelWidth -= 10 ;" value="縮める">

※ pixelWidth は大文字小文字の区別があって、"W"は大文字です。

お礼

ありがとうございます。
おっしゃるとおり、狙ったところに表示させるのが難しい。
試行錯誤で何度も表示させてるところです。

回答No.2

a-kuma

例えば、横に棒がのびるグラフであれば、幅が１ピクセルの画像を用意しておいて、
IMG タグで、WIDTH 属性を動的に変えて、表示する、というのはどうですか。

<table>
<tr><td>項目１<td><img src="bar.png" width="50">
<tr><td>項目２<td><img src="bar.png" width="100">
</table>

お礼

ありがとうございます。
残念ながら画像はNGなんですよ・・・

回答No.1

wyvern0

私が現在製造を行っているプロジェクトで同じように動的に棒グラフの作成を行っています。
仕様言語はＡＳＰですが、ＨＴＭＬを作る部分だけなのでご使用の言語で作成してください。

方法は言葉で説明するのは難しいので、サンプルを記述します。

<table border="1" width="100" cellspacing="0">
<td width="500" colspan="10">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40.9" bgcolor="#0000FF">文字<br></td>
<td width="59.1" bgcolor="#FFFFFF">文字<br></td>
</tr>
</table>
</table>

これでできると思います。

お礼

ありがとうございます。
言葉が足らなくってすみませんが、等間隔でテーブルの格子を出しつつ
棒グラフを描きたかったんですよ。
方眼紙を塗りつぶす感じですね。
仕方がないので、現在既に表示されているテーブルの上に、
DIVでSTYLEに幅、高さ等を放り込んで表示させようとしてます。
px設定にしても全て表示後にフォントサイズを変更されるとまずいことが起こるのですが・・・