• ベストアンサー

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

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

質問者が選んだベストアンサー

  • ベストアンサー
noname#85865
noname#85865
回答No.3

質問にあるようなグラフを会社の同僚が作っているのをみたことがあります。どこかのホームページのサンプルを参考に作ったらしいですが・・・ 確か、Javascriptとスタイルシートを組み合わせていたようなおぼえがあります。 座標を指定し、その座標と座標を結ぶ直線を描くスタイルシートを、ASPで書き出していました。 また、mousedownなどのイベントが発生した座標を取得し、再描画していたと思います。 検索すればサンプルが見つかるのではないでしょうか。うる憶えでスイマセン。

LemonT
質問者

お礼

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

その他の回答 (3)

noname#85865
noname#85865
回答No.4

先ほどの回答の補足です。ＶＭＬということでした。基本的なサンプルですが、参考になれば・・・ 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>

LemonT
質問者

お礼

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

回答No.2

マウスクリックイベントは、OfficeグラフのobjectタグのidがChartSpace1だとすると、 JavaScriptなら <script language="JavaScript" for="ChartSpace1" event="Click"> ～処理～ </script> VBScriptなら <script language="VBScript"> Sub ChartSpace1_Click(ChartEventInfo) ～処理～ End Sub </script> です。

LemonT
質問者

お礼

アドバイスありがとうございました。 OWCはやめて、VMLでグラフ描画することにしました。 無事、JavaScriptで座標取れました。 OWCは、今後の課題にしたいと思います。

LemonT
質問者

補足

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

回答No.1

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. Microsoft ASP

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する