OfficeWebコンポーネントによるグラフのイベント取得

解決済

質問者：LemonT
質問日時：2002/08/20 10:13
回答数：4件

お世話になります。

当方、折れ線グラフを含むシステムをASPにて実現したいと思っています。
試しにOWC（OfficeWebコンポーネント）を使ってグラフは描けたのですが、
更に折れ線グラフ上からマウスクリックイベントを取得したいのです。
（上記イベントを取得するには「ValueToPointメソッド」というものを
使用するらしいのですが、当方の環境がOffice2Kのためかエラーになって
しまいます。OfficeXPじゃないとサポートしてないのかな？）
また、プロットエリアに縦線を描きたいのですが、可能でしょうか？

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ichan
回答日時：2002/08/21 08:27

質問にあるようなグラフを会社の同僚が作っているのをみたことがあります。

どこかのホームページのサンプルを参考に作ったらしいですが・・・

確か、Javascriptとスタイルシートを組み合わせていたようなおぼえがあります。

座標を指定し、その座標と座標を結ぶ直線を描くスタイルシートを、ASPで書き出していました。

また、mousedownなどのイベントが発生した座標を取得し、再描画していたと思います。

検索すればサンプルが見つかるのではないでしょうか。うる憶えでスイマセン。

- 0
- 件

通報する

この回答へのお礼

アドバイスありがとうございました。

グラフの上に透過gifを貼り付け、細かくエリアを切るのはやめました。
再描画する前に一瞬フォーカスが残ってしまいますので。
無事、JavaScriptで座標取れました。

通報する

お礼日時：2002/08/23 08:35

No.4

回答者： ichan
回答日時：2002/08/21 08:40

先ほどの回答の補足です。

ＶＭＬということでした。基本的なサンプルですが、参考になれば・・・

V_GRAPH.htmlとV_GRAPH2.aspというファイルです。

***********V_GRAPH.html**************************
<HTML>
<HEAD>
<TITLE>VMLによるグラフサンプル</TITLE>
</HEAD>
<BODY bgcolor="fffff1">
<center>
<div style="position:absolute;top:30;left:20;height:100;width:150;background-color:#FFA500;filter:alpha(opacity=100,
finishOpacity=0,style=1,startX=0,startY=0,finishX=150,finishY=100)">
</div>
<div style="position:absolute;top:110;left:110;height:100;width:150;background-color:#87CEFA;filter:alpha(opacity=100,
finishOpacity=0,style=1,startX=0,startY=0,finishX=150,finishY=100)">
</div>
<span id="test1" style="position:relative:top:5;left:5;width:600;height:50;font-size:23pt;color:NAVY;font-weight:bold;font-family:ＭＳＰゴシック;filter:alpha(opacity=100,
finishOpacity=0,style=1,startX=0,startY=0,finishX=400,finishY=50) shadow(color=gray,direction=150)">
ＡＳＰとＶＭＬによるグラフ作成
</span>
<hr>
<table borser="0" width="600">
<tr>
<td>
<b>ＡＳＰとＶＭＬ(VectorMarcupLanguage)を使用して、折れ線グラフを作成してみます！</b><br>
<br>
<font color="blue">特徴として、画像ファイルを一切使用せず、位置座標をもったベクトルデータで線分や図形を表現しています。</font>
<br>
<br>
<br>
■とりあえずサンプルなので、以下の項目をクリアしてないと正常に表示しません！<br>
<font color="red">テキストＢＯＸは全部埋めてください。</font>
<br>
<br>
■テキストＢＯＸを適当に埋めて、"グラフ表示"ボタンを押してください。<br>
<font color="red">デフォルトでは商品別の月別売上推移の表になっています。</font><br>
</td>
</tr>
</table>
<Form method="post" Action="v_graph2.asp">
<table border="0"">
<tr>
<td></td>
<td></td>
<td>
<Input type="text" name="RangeA1" value="Jan" size="5">
<Input type="text" name="RangeB1" value="Feb" size="5">
<Input type="text" name="RangeC1" value="Mar" size="5">
<Input type="text" name="RangeD1" value="Apr" size="5">
<Input type="text" name="RangeE1" value="May" size="5">
<Input type="text" name="RangeF1" value="Jun" size="5">
<Input type="text" name="RangeG1" value="Jul" size="5">
<Input type="text" name="RangeH1" value="Aug" size="5">
</td>
</tr>
<tr>
<td>系列１</td>
<td>
<Input type="text" name="Range2" value="Shohin-A" size="12">
</td>
<td>
<Input type="text" name="RangeA2" value="50" size="5">
<Input type="text" name="RangeB2" value="78" size="5">
<Input type="text" name="RangeC2" value="120" size="5">
<Input type="text" name="RangeD2" value="70" size="5">
<Input type="text" name="RangeE2" value="210" size="5">
<Input type="text" name="RangeF2" value="160" size="5">
<Input type="text" name="RangeG2" value="92" size="5">
<Input type="text" name="RangeH2" value="145" size="5">
</td>
</tr>
</table>
<Input Type="submit" Value="グラフ表示"></Form>
</center>
</BODY>
</HTML>
***********V_GRAPH2.asp**************************
<%
Dim txt(8)
Dim val(8)
Dim gif(7)
Dim gset(7)
Dim gheight(7)

txt(0)=Request("RangeA1")
txt(1)=Request("RangeB1")
txt(2)=Request("RangeC1")
txt(3)=Request("RangeD1")
txt(4)=Request("RangeE1")
txt(5)=Request("RangeF1")
txt(6)=Request("RangeG1")
txt(7)=Request("RangeH1")

title=Request("Range2")

val(0)=CInt(Request("RangeA2"))
val(1)=CInt(Request("RangeB2"))
val(2)=CInt(Request("RangeC2"))
val(3)=CInt(Request("RangeD2"))
val(4)=CInt(Request("RangeE2"))
val(5)=CInt(Request("RangeF2"))
val(6)=CInt(Request("RangeG2"))
val(7)=CInt(Request("RangeH2"))
offTop=200'//TOPからグラフ表示範囲のoffset
offLeft=75'//Leftからグラフ表示範囲のoffset
tWidth=400'//グラフ表示範囲の幅
tHeight=300'//グラフ表示範囲の高さ
pitch=50'//グラフ表示ピッチ
%>
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<style>
v\:*{behavior:url(#default#VML);}
</style>
<body bgcolor="fffff1">
<center>
<span id="test1" style="position:relative:top:5;left:5;width:600;height:50;font-size:28pt;color:NAVY;font-weight:bold;font-family:ＭＳＰゴシック;filter:alpha(opacity=100,
finishOpacity=0,style=1,startX=0,startY=0,finishX=400,finishY=50) shadow(color=gray,direction=150)">
display the graph!
</span>
</center>
<hr>
<Span style="position:absolute;top:<%=offTop%>;left:<%=offLeft%>;height:<%=tHeight%>;width:<%=tWidth%>;background-color:#87CEFA;filter:alpha(opacity=100,
finishOpacity=0,style=1,startX=0,startY=0,finishX=400,finishY=50)"></Span>
<%
For i= 0 To 6
%>
<v:line from="<%=(i*pitch)%>,<%=tHeight-val(i) %>" to="<%=(i+1)*pitch%>,<%=tHeight-val(i+1)%>" strokecolor="red" strokeweight="2px" style="position:absolute;left:<%=offLeft+25%>;top:<%=offTop%>;"/>
<%Next
i=0
For i=0 to 7
%>
<v:rect fillcolor="#111111" strokeweight="2px" style="position:absolute;left:<%=(i*pitch)+97%>;top:<%=497-val(i)%>;width:7;height:7;"/>
<%
Next
i=0
For i=0 to 7
%>
<Span style="position:absolute;top:<%=(offTop-20)+(tHeight-val(i))%>;left:<% =(offLeft+18)+(i*pitch)%>"><%=val(i)%></Span>
<%
Next
i=0
For i=0 to 7
%>
<Span style="position:absolute;top:<%=offTop+tHeight%>;left:<% =(offLeft+15)+(i*pitch)%>;"><%=txt(i) %></Span>
<%
Next
%>
<Span style="position:absolute;top:220;left:240;"><%=title%></Span>
<br>
<br>
<center>
このように簡単にグラフを作成する事ができます。<br>
VMLを使用すればWEBの表現力は更に豊かになります。<br>
<A href="v_graph.htm">Back</a>
</center>
</BODY>
</HTML>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

私もVMLのサンプル見つけてました。
既にOWCをやめ、サンプルをベースに奮闘しています。
グラフの上に透過gifを貼り付け、細かくエリアを切ってクリックした座標から
再描画しています。
OWCを使えたら良かったのですが、サンプルを含めて実績ないですもんね。

通報する

お礼日時：2002/08/21 08:53

No.2

回答者： FlossenEngel
回答日時：2002/08/20 19:43

マウスクリックイベントは、OfficeグラフのobjectタグのidがChartSpace1だとすると、

JavaScriptなら
<script language="JavaScript" for="ChartSpace1" event="Click">
～処理～
</script>
VBScriptなら
<script language="VBScript">
Sub ChartSpace1_Click(ChartEventInfo)
～処理～
End Sub
</script>
です。

この回答への補足

回答ありがとうございます。

上記方法だと、グラフ全体のイベントになってしまうと思っています。
グラフエリア内の座標を取得したいのですが、難しそうですね。
また、プロットエリアの縦線はクリックした座標に描きなおすことが
できればと思い、質問した次第です。

補足日時：2002/08/20 20:25

通報する

- 0
- 件

通報する

この回答へのお礼

アドバイスありがとうございました。

OWCはやめて、VMLでグラフ描画することにしました。
無事、JavaScriptで座標取れました。

OWCは、今後の課題にしたいと思います。

通報する

お礼日時：2002/08/23 08:39

No.1

回答者： FlossenEngel
回答日時：2002/08/20 17:38

とりあえずプロットエリアの縦線は、FrontPage2000で...

1.Officeグラフを選択後、右クリックしてプロパティツールボックスを表示させる。
2.ドロップダウンコンボからグラフ…項目軸…(要は項目軸)を選択。
3.目盛と枠線というバーをクリック。
4.目盛と補助目盛について設定するところが現れるので目盛線チェックボックスにチェックを入れる。

こんなところでしょうか。