SharePoint のバー グラフを作成します。

概要:

(更新プログラム 12/04/07: これに対処する、非常に興味深い web パーツで別のブログへのリンク、最後にもう一つの興味深いリソースを追加)

このブログのエントリは、SharePoint のバー グラフを作成する方法を説明します. それはデータ ビュー web パーツに依存するだけ、これは WSS および MOSS 環境で動作します。.

全体的なアプローチは以下のとおりです。:

  1. グラフにデータが含まれるリストまたはドキュメント ライブラリを作成します。.
  2. 関連付けられているドキュメント ライブラリの場所 / カスタム ページに一覧表示し、データ ビュー web パーツに変換 (DVWP).
  3. グラフとして表示する 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>&nbsp;</td></tr></テーブル></td>
</tr>
<tr>
<td の幅 = 10%>閉じる</td>
<td><テーブルの cellpadding ="0" cellspacing ="0" 境界線幅 0 = = 25 %><tr bgcolor = 赤><td>&nbsp;</td></tr></テーブル></td>
</tr>
<tr>
<td の幅 = 10%>ストール</td>
<td><テーブルの cellpadding ="0" cellspacing ="0" 境界線幅 0 = = 25 %><tr bgcolor = 赤><td>&nbsp;</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 専用" 
xmlns:msxsl 専用="urn:スキーマ-マイクロソフト-com:xslt" xmlns:xsl="http://www.w3.org//1999年/XSL 変換"
xmlns:SharePoint="命令" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:o="urn:スキーマ-マイクロソフト-com:オフィス" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:dt="uuid:C2F41010-65B3-11 d 1 A29F-00AA00C14882" xmlns:rs="urn:スキーマ-マイクロソフト-com:行セット" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urn:frontpage:内部"
> <xsl:出力 メソッド="html" インデント="いいえ" /> <xsl:10 進形式 ナン="" /> <xsl:param 名前="ListUrlDir"></xsl:param> <!-- ドリル ダウンをサポートするために必要. --> <xsl:テンプレート 一致="/" xmlns:SharePoint="命令"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
> <xsl:変数 名前="dvt_StyleName">テーブル</xsl:変数> <xsl:変数 名前="" 選択="/dsQueryResponse/行/行" /> <xsl:変数 名前="dvt_RowCount" 選択="カウント($行)" /> <xsl:変数 名前="IsEmpty" 選択="$dvt_RowCount = 0" /> <xsl:変数 名前="dvt_IsEmpty" 選択="$dvt_RowCount = 0" /> <xsl:選択してください。> <xsl:とき テスト="$dvt_IsEmpty"> グラフにデータがないです。!<br/> </xsl:とき> <xsl:それ以外の場合> <!-- 面白いものはここから始まります. グラフ内の行ごとに変数のペアを定義する必要があります。: 合計項目数と合計のパーセント. --> <xsl:変数 名前="totalProposed" 選択="カウント(/dsQueryResponse/行/行[空白を正規化(@Status) = '提案'])" /> <xsl:変数 名前="percentProposed" 選択="$totalProposed div $dvt_RowCount" /> <xsl:変数 名前="totalInProcess" 選択="カウント(/dsQueryResponse/行/行[空白を正規化(@Status) = 'のプロセス'])" /> <xsl:変数 名前="percentInProcess" 選択="$totalInProcess div $dvt_RowCount" /> <xsl:変数 名前="totalStalled" 選択="カウント(/dsQueryResponse/行/行[空白を正規化(@Status) '停止' =])" /> <xsl:変数 名前="percentStalled" 選択="$totalStalled div $dvt_RowCount" /> <!-- ここで我々 の HTML テーブルを定義します。. 私は一貫性を持つようにいくつかの標準的な SharePoint のスタイルここから借りています. 私はそれは同様のテーマをオーバーライド グローバル css ファイルへの変更を名誉と思う. --> <テーブル ="100%" cellspacing="0" cellpadding="2" スタイル="右枠線: 1 固体 #C0C0C0; 下枠線: 1 固体 #C0C0C0; 罫線左: 固体; ボーダー左幅: 1; 罫線上部: 固体; 国境トップ幅: 1;"> <tr> <td 位置合わせ="センター"> <テーブル 境界線="1" ="100%"> <!-- グラフにしたい各ステータスを, 「ゲイビレッジをと呼んでください。" テンプレート. 我々 はそれを渡す: 1. 行のラベル. これはハイパーリンクに変換します。. 2. パーセント (上から変数). 3. 基になるリストからコードの実際のフィールド名. これは、表示ラベルと一致する必要はありません。. 4. フィールドの値のを一致 #3. 5. このステータス コードのアイテムの合計 (すべてのステータス コードのない総計). それが発する、 <tr></tr> 水平バー グラフ線. このテンプレートに表示したい各ステータス コードを募集します。. --> <xsl:呼び出しテンプレート 名前="ゲイビレッジ"> <xsl:param と 名前="BarDisplayLabel" 選択="' 提案 '"/> <xsl:param と 名前="BarPercent" 選択="$percentProposed"/> <xsl:param と 名前="QueryFilterFieldName" 選択="' 状態 '"/> <xsl:param と 名前="QueryFilterFieldValue" 選択="' 提案 '"/> <xsl:param と 名前="TotalItems" 選択="$totalProposed"></xsl:param と> </xsl:呼び出しテンプレート> <xsl:呼び出しテンプレート 名前="ゲイビレッジ"> <xsl:param と 名前="BarDisplayLabel" 選択="' 停止 '"/> <xsl:param と 名前="BarPercent" 選択="$percentStalled"/> <xsl:param と 名前="QueryFilterFieldName" 選択="' 状態 '"/> <xsl:param と 名前="QueryFilterFieldValue" 選択="' 停止 '"/> <xsl:param と 名前="TotalItems" 選択="$totalStalled"></xsl:param と> </xsl:呼び出しテンプレート> <xsl:呼び出しテンプレート 名前="ゲイビレッジ"> <xsl:param と 名前="BarDisplayLabel" 選択="' のプロセス'"/> <xsl:param と 名前="BarPercent" 選択="$percentInProcess"/> <xsl:param と 名前="QueryFilterFieldName" 選択="' 状態 '"/> <xsl:param と 名前="QueryFilterFieldValue" 選択="' のプロセス'"/> <xsl:param と 名前="TotalItems" 選択="$totalInProcess"></xsl:param と> </xsl:呼び出しテンプレート> </テーブル> </td> </tr> </テーブル> </xsl:それ以外の場合> </xsl:選択してください。> </xsl:テンプレート> <!-- このテンプレートは、バー グラフで個々 の行を表示する作業を行います. あなたはおそらくあなたの微調整をここのほとんどをやる. --> <xsl:テンプレート 名前="ゲイビレッジ"> <xsl:param 名前="BarDisplayLabel" /> <!-- ラベルを表示するには --> <xsl:param 名前="BarPercent"/> <!-- 合計のパーセント. --> <xsl:param 名前="QueryFilterFieldName"/> <!-- クエリにジャンプするために使用 & フィルター --> <xsl:param 名前="QueryFilterFieldValue"/> <!-- クエリにジャンプするために使用 & フィルター --> <xsl:param 名前="TotalItems" /> <!-- この barlabel の合計数 --> <tr> <!-- バー自体のラベルします。. --> <td クラス="ms formbody" ="30%"> <!-- このステートメントの次のセットは基になるデータのフィルター処理されたビューにドリルダウンすることができますクエリ文字列を作成します。. 私たちが作るここでいくつかのものを使用: 1. 列にフィルターを適用するリストに FilterField1 と FilterValue1 を渡すことが我々. 2. SharePoint は私たちに重要なパラメーターを渡すこと, 対象となるこの DVWP「実行している」基になるリストを指す ListUrlDir. XSL の楽しみではないです。? --> <xsl:本文 無効にする出力エスケープ="はい"> <![CDATA[<href ="]]></xsl:本文> <xsl:値の 選択="$ListUrlDir"/> <xsl:本文 無効にする出力エスケープ="はい"><![CDATA[?FilterField1 =]]></xsl:本文> <xsl:値の 選択="$QueryFilterFieldName"/> <xsl:本文 無効にする出力エスケープ="はい"><![CDATA[&FilterValue1 =]]></xsl:本文> <xsl:値の 選択="$QueryFilterFieldValue"/> <xsl:本文 無効にする出力エスケープ="はい"><![CDATA[">]]></xsl:本文> <xsl:値の 選択="$BarDisplayLabel"/> <xsl:本文 無効にする出力エスケープ="はい"><![CDATA[</は>]]></xsl:本文> <!-- 次のビットの形式でいくつかの数字を示しています。: "(合計 / % 合計の)" --> (<xsl:値の 選択="$TotalItems"/> / <!-- これは私たちの素敵なパーセントのラベルを作成します. おかげで, マイクロソフト! --> <xsl:呼び出しテンプレート 名前="percentformat"> <xsl:param と 名前="%" 選択="$BarPercent"/> </xsl:呼び出しテンプレート>) </td> <!-- 最後に, 出力、 <td> バーのタグ自体.--> <td> <テーブル cellpadding="0" cellspacing="0" 境界線="0" ="{ラウンド($BarPercent * 100)+1}%"> <tr bgcolor=""> <xsl:本文 無効にする出力エスケープ="はい"><![CDATA[&nbsp;]]></xsl:本文> </tr> </テーブル> </td> </tr> </xsl:テンプレート> <!-- これはいくつかの XSL テンプレートでは MS を見つけたから直接取得します。. --> <xsl:テンプレート 名前="percentformat"> <xsl:param 名前="%"/> <xsl:選択してください。> <xsl:とき テスト="番号の書式設定($%, '#,##0%;-#,##0%')= 'ナン'">0%</xsl:とき> <xsl:それ以外の場合> <xsl:値の 選択="番号の書式設定($%, '#,##0%;-#,##0%')" /> </xsl:それ以外の場合> </xsl:選択してください。> </xsl:テンプレート> </xsl:スタイル シート>

結果:

上から 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:選択してください。> これを達成するために.

その他のリソース:

幸せな変換!

<終了/>

私のブログを購読します。!

17 「上の思考SharePoint のバー グラフを作成します。

  1. Chris B

    このページは、ほとんど私が探していたタスクを完了.

    今週のアンケートを作成する SharePoint のアンケート リストを使用したいグループをあります。. キャッチ? コードを参照してくださいしたくないです。… 世論調査を送信するたびにシステムを変えるか (毎週更新の計画).

    アンケート リストにこれを接続し、答えの最初の列に、グラフを作成することができた. 値とラベルが必要がある何を予測することはできませんが前方に移動. さらに悪いことがありますもっとまたはより少なく有効回答毎週.

    他の場所で念のためになります, しかし、誰かは行と利用可能なオプションと動的にこれらの設定ではなく、予期される値をハードコーディングの数に基づいてラベルを作成する方法を見つけました?

  2. グレッグ ・ Laushine

    おかげでポール. 非常に有用. あなたの仕事のおかげで, グラフ バー列を既存の dvwp でを追加することができた (例えば. タスクの) コードの数行を非常に簡単に.
    SharePoint Designer で, タイトルとデータ ビューを挿入し、 % タスク一覧から列を完了します。. 私は、セルの 1 つにカーソルを置き、右クリック. 私は選択を右に列を挿入. [コード] ビューで, 私が見つかりました、 <td> 置き換えると、 <xsl:あなたのコードでセル内のテキスト要素:
    <テーブルの cellpadding ="0" cellspacing ="0" 国境 ="0"
    幅 ="{ラウンド(@PercentComplete * 100)+1}%">
    <tr スタイル ="背景色:赤">
    <xsl:テキスト無効にする出力エスケープ ="yes"><![CDATA[&nbsp;]]></xsl:本文>
    </tr>
    </テーブル>

    注 bgcolor から行色コードを変更された「赤 =" スタイル ="背景色:赤"
    また, 私のリストで、列の 1 つを選択することができた (@PercentComplete) "$BarPercent の代わりに"
    グレッグ

  3. ヴォルフガング
    ポール, これのおかげで! 何をしたかの正確なコピーを作成し、それはほぼ完璧に動作します. コードの 2 番目の段落の行の 1 つの小さな問題があった:
    <xsl:テンプレートの match ="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20"&gt;
    配置する必要があります。 http://schemas.microsoft.com/WebParts/v2/DataView/designer 引用符で.
    後それが魅力のように動作することを修正! 私は今私自身のリストとステータスにこれが適応されますが私は確信しているは難しいされません。. (結果を掲載する予定)
    おかげで再び
    〜 ウォル
  4. ない名前
    質問 –
    どのような私のグラフの場合, カウント 1 つの状態だけでなく複数のものをカウントする変数を募集?
    だから, たとえば、どのような場合私は持っていた —
    <xsl:変数名 ="RequestsInitialized"
    選択して"数 =(/dsQueryResponse/行/行[空白を正規化(@Status)「仕掛品」を =])" />
    –事は, 「仕掛品」インスタンスをカウントしたい, しかし、' 保留中レビュー ' のような他の何かをカウントするこの変数も欲しい。. どのようにこれを行うだろう?
    おかげで!
  5. Murty Srirangam
    こんにちはポール,
    Iam 本当にこれは本当にあなたの偉大な努力. このコードをポストだろう場所を説明してくださいすることができます。. 4 つの新しいファイルと、prjoect を作成しました。. その後することができますより詳細に何か説明して行う必要があります。.
    ありがとう
    Murty
  6. アンドリュー ・ キャリントン
    こんにちは, ユーザー情報に対するタスク リストでタスクのグラフを表示するよう、少しこれを変更しようとしています。. ユーザー プレゼンス列である @AssignedTo と呼ばれる列を使用してください。. レンダリングされた HTML を表示するそれを得ることができますが、計算値を表示するそれを得ることができません。.
    任意のアイデア?
    おかげで
    Andy
  7. パトリック ルカが書いた:
    こんにちはポール,
    偉大なポスト!
    質問:
    同時に 2 つのフィールドにフィルターを適用したいと思います: どのようにこれは達成することができます。?
    たとえば, あなたの変数の 1 つは totalStalled と呼ばれる、@Status にフィルター.
    私の別のフィールドに返されるレコードの数を減らすために同時にフィルターを適用したいと思います.
    私はすでに 'OR' を作る方法を発見しました。, けどなんとか越える、' と’
    ' または’ このような達成することができます。:
    <xsl:変数名 ="totalStalled" 選択して"数 =(/dsQueryResponse/行/行[空白を正規化(@Status) '停止' =] | /dsQueryResponse/行/行[空白を正規化(@ExtraFilterField) 'value' を =])" />
  8. ロビン ・ Meuré

    こんにちはポール!

    ニースの仕事! 私はまた、グラフィカルな方法でSharePointリストを表示するには、私の心の中でこのようなものを持っていました😉

  9. フランク

    私は、「SharePointでダッシュボードを使用しています’ 質問. 軍病院、イントラネット用の MOSS 標準を使用して、私達のコマンド グループを表示するためのダッシュ ボードを構築したいと思います ' リアルタイム’ 可能であれば. 主なポイントの一つ、施設内でのリアルタイムの現在の作業負荷の表示は文字通りそれを見るを上下に変更 (クリックする必要があります。 “更新”/F5 キーを押して).

    事前にありがとう,

返信にコメントを残す パトリック ルカが書いた: 返信をキャンセル

あなたのメールアドレスが公開されることはありません. 必須フィールドは、マークされています *