概要:
(更新プログラム 12/04/07: これに対処する、非常に興味深い web パーツで別のブログへのリンク、最後にもう一つの興味深いリソースを追加)
このブログのエントリは、SharePoint のバー グラフを作成する方法を説明します. それはデータ ビュー web パーツに依存するだけ、これは WSS および MOSS 環境で動作します。.
全体的なアプローチは以下のとおりです。:
- グラフにデータが含まれるリストまたはドキュメント ライブラリを作成します。.
- 関連付けられているドキュメント ライブラリの場所 / カスタム ページに一覧表示し、データ ビュー web パーツに変換 (DVWP).
- グラフとして表示する HTML を生成する dvwp での XSL を変更します。.
ビジネス シナリオ / セットアップ:
標準のタイトル列を持つカスタム リストと 1 つの追加列を作りました, 「ステータス」. これは、モデルは、 (非常に単純化) 「経費の承認" シナリオがタイトルを表すプロジェクトおよびステータス値のリストから:
- 提案
- プロセス内
- ストール
目的は、これらのステータス コードを示すインタラクティブな水平バー グラフを生成するために.
リストを格納した、このように見えます:
データ ビュー Web パーツを作成します。:
ページにカスタム リストを追加することによって dvwp で作成します。 (私の場合のサイトのページ) 指示に従います ここで (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Dvwp で単に作成に加えて, すべての利用可能な行を表示するページング プロパティを設定することも. 私, これは次のよう:
この時点で, 私は常に SPD とは、ブラウザーを閉じる. 私は、再度、ブラウザーを使用してページを開きます. これは、誤ってページの web パーツのレイアウトをいじくる回避できます。.
XSLT を変更します。:
今こそ、XSLT を変更するには.
私は常にこの visual studio を使用してください。. (参照してください。 ここで たくさん役立つ intellisense に関する注意について).
空のプロジェクトを作成する 4 つの新しいファイルを追加 (単語"オリジナルを置き換える" "New" 適切な):
- Original.xslt
- New.xslt
- オリジナル Params.xml
- 新しい Params.xml
私の場合, それはこのように見える:
Web パーツを変更および params と XSL"オリジナルをコピー" Visual Studio でのバージョン.
ここでの目的は HTML がグラフとして表示するに dvwp でクエリから返される結果を変換する XSL が発生するには.
この目的のため, 最初、HTML がどのように私たちは"XSL"として知られている狂気混乱して取得する前に考慮すること. (明確にするには, 以下は簡単な例です。; don't をそれを入力または visual studio にコピー/ペースト. 書き込みの後半を開始点、完全な打撃を提供します。). 次のサンプル グラフが直後 HTML としてレンダリングされます。:
対応する HTML:
<html> <体> <センター> <テーブル幅 = 80%> <tr><td><センター>水平棒グラフ</td></tr> <tr> <td 整列 =「センター」> <表の罫線 ="1" 幅 = 80%> <tr> <td の幅 = 10%>オープン</td> <td><テーブルの cellpadding ="0" cellspacing ="0" 国境 = 0 幅 = 50%><tr bgcolor = 赤><td> </td></tr></テーブル></td> </tr> <tr> <td の幅 = 10%>閉じる</td> <td><テーブルの cellpadding ="0" cellspacing ="0" 境界線幅 0 = = 25 %><tr bgcolor = 赤><td> </td></tr></テーブル></td> </tr> <tr> <td の幅 = 10%>ストール</td> <td><テーブルの cellpadding ="0" cellspacing ="0" 境界線幅 0 = = 25 %><tr bgcolor = 赤><td> </td></tr></テーブル></td> </tr> </テーブル> </td> </tr> </テーブル> </体> </html> |
「赤」に行の背景色を設定することによって私のバーを作成する死んでシンプルなアプローチを使用されます。.
これは持ち帰りはこちら: 最後に, 我々 がやっているすべては行と列で HTML を作成します。.
XSLT テンプレート:
水平バー グラフを生成する XSLT をコピーしました。. それはかなりよく、私はこれらのノートを除いてここに追加されませんように、コメント:
- 既定の XSL が SharePoint Designer くれた dvwp で初めて作成したときに開始.
- SPD からこれを削減することができた 657 行 166 ライン.
- 私は didn't をいじくり回パラメーター XML ファイル (XSL とは別であり dvwp で自体を変更するのに行くとき何を意味知っているよ; 変更することができます 2 つのファイルがあります。). ただし, それを簡素化するために, XSL からほぼすべての人を削除しました。. これを作りたい場合は、これらのパラメーターの使用, 変数定義を XSL に追加するだけ. Visual studio プロジェクトに元の XSL 変数定義があるので、それは簡単にできる.
- コピーして、visual studio プロジェクトに直接これを貼り付けることができるべき. [, 私の呼び出しを削除して、独自の呼び出し「ゲイビレッジ」を挿入します。.
- 作成することによって作品をドリルダウンします。 <href> このように: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. この手法は、他のコンテキストで値のかもしれない. 最初に, 複雑な形式に準拠する必要があります私はだと思った: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, 私の環境でその必要はありませんが、. リストの URL は、SharePoint によって私たちに渡されますので、これは一般化するは非常に簡単.
ここでは:
<xsl:スタイル シート バージョン="1.0" 除外結果接頭辞="rs z o s ddwrt dt msxsl 専用" |
結果:
上から XSL は、このグラフを生成します。:
基になるデータのステータス コードをクリックしてドリルダウンします。:
思考の結論:
これは一般化することができます。?
このグラフの概念を愛してください。, 行き、とても手作業でコーディングを行う必要があるという事実を嫌いだが、. これを一般化できるかどうかを少し考えを与えてくれたし、私は楽観的, しかし、私はどこかにすべての仕事を提供しないパスに沿ってれんが造りの壁があることを少し恐れても. 誰もがこの上のいくつかの良いアイデアを持っている場合, コメントで注意してくださいまたは 私にメールします。.
垂直のグラフ:
これは水平バー グラフです。. 確かに垂直のグラフを作成することが可能です。. 我々 は、HTML を変更する必要があります。. 同じ方法を始めるだろう: 垂直のバー グラフの HTML 表現を作成し、XSL 経由で取得する方法を把握し、. 誰もが興味なら, 私はそれを試してみるし、うまくように説得される可能性. 誰かが既にそれを行っている場合, 私が知っていると私はあなたのブログへのリンクを喜んでますしてください🙂
垂直のグラフとの課題は、グラフのラベルは管理が困難だと思う, しかし、不可能ではない確かに.
フィールド名ガッチャ:
少なくとも 2 つの外を見るフィールド名とは.
最初, スペースを含むフィールド名は、XSL でエスケープするには. これはおそらく、ここで問題:
<xsl:変数 名前="totalProposed"
選択="カウント(/dsQueryResponse/行/行[空白を正規化(@Status) = '提案'])" />
場合"ステータス" 実際にという名前の列"ステータス コード" "Status_x0020_Code"として参照する必要がありますし、:
<xsl:変数 名前="totalProposed"
選択="カウント(/dsQueryResponse/行/行[空白を正規化(@Status_x0020_Code) = '提案'])" />2 番目, 私はこれについて少しあいまいだと, また、フィールド名の変更の警告にする必要があります。. あなたのフィールド"ステータス コードに名前を付ける場合" その後, 「AFE 状況」を名前を変更する, 「内部名" 変わりません. 内部名が"ステータス コードをできます。" "Status_x0020_Code"として参照する必要があります. 「その他リソース" リンクが診断し、この種の問題の修正に役立つことがあります。.
その色について:
"赤を選んだ" それは現時点では私を喜ばせるため. 大した数の単なる視覚的な記述を提供するために異なる色を表示することはないです。, しかし、有用な KPI をまた提供するために. たとえば, 場合の割合"失速" AFE は > 10% その後、赤を表示します。, そうでなければ黒で表示します。. 使用 <xsl:選択してください。> これを達成するために.
その他のリソース:
- 内部名を決定します。 (他の良い情報) リスト内のデータの: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- SharePoint によって提供されるすべてのデータを表示します。 (未加工の XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- 特定の列の XPATH 式を取得します。: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- OWA を使用して別のアプローチ(?). 私はないそれに掘っています。, しかし有望に見える, 円グラフのために特に: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
幸せな変換!
<終了/>