개요:
(업데이트 12/04/07: 아주 흥미 있는 웹 파트를 통해 이것을 해결 하는 다른 블로그에 링크 끝에 또 다른 흥미로운 리소스 추가)
이 블로그 항목을 SharePoint에서 막대 그래프를 만드는 방법을 설명 합니다.. 이 데이터 보기 웹 파트에 따라 달라 집니다 WSS 및 MOSS 환경에서 작동.
전반적인 접근은 다음과 같습니다.:
- 그래프 데이터를 포함 하는 목록 또는 문서 라이브러리 만들기.
- 장소 관련된 문서 라이브러리 / 사용자 지정 페이지에 나열 하 고 데이터 뷰 웹 파트를 변환 (DVWP).
- 그래프로 보여주는 HTML을 생성 하기 위해 DVWP의 XSL을 수정.
비즈니스 시나리오 / 설치:
내가 만든 표준 제목 열이 있는 사용자 지정 목록, 추가 열, "상태". 이 모델 (매우 simplistically) 비용에 대 한 "권한 부여" 여기서 제목을 나타냅니다 프로젝트 및 상태 값의 목록에서 시나리오:
- 제안
- 과정에서
- 지연
이 상태 코드를 표시 하는 대화형 수평 막대 그래프를 생성 하는 목표는.
사람이 거주 케 된을 목록 하 고 이런 모습:
데이터 보기 웹 파트 만들기:
페이지에 사용자 지정 목록을 추가 하 여는 DVWP를 만들 (내 경우에서 사이트 페이지) 지침에 따라 여기 (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
간단 하 게는 DVWP를 만들 뿐만 아니라, 우리는 또한 사용할 수 있는 행을 모두 표시 하려면 페이징 속성을 설정 해야. 나를 위해, 이 같이 보입니다.:
이 시점에서, 난 항상 SPD 및 브라우저를 닫습니다.. 난 다음 다시 브라우저를 사용 하 여 페이지를 엽니다.. 이 페이지에 웹 파트 레이아웃을 실수로 청소 방지.
XSLT를 수정:
그것은 지금 시간 XSLT를 수정 하려면.
나는 항상이 대 한 visual studio를 사용. (참조 여기 많은 도움이 될 것입니다 intellisense에 대 한 중요 사항에 대 한).
빈 프로젝트를 만들려면 네 개의 새 파일 추가 ("원래 단어를 교체" "new" 적절 한):
- Original.xslt
- New.xslt
- 오리지널 Params.xml
- 새로운 Params.xml
내 경우에는, 그것은 이것 처럼 보인다:
웹 파트를 수정 하 고 매개 변수 및 XSL 원본"에 복사" Visual Studio에서 버전.
목표는 여기 우리가 다시 들어가서 DVWP 쿼리에서 그래프를 렌더링 하는 HTML 결과 변환 하는 XSL 원인입니다..
이 위해, 그것은 어떤 HTML 처럼 보여야 우리가 "XSL" 이라고 하는 광 기에 의해 혼란 스 러 워 하기 전에 먼저 고려 하는 데 도움이. (확실 하 게 하려면, 다음은 간단 하 게 예; 하지 그것을 입력 또는 복사/붙여넣기 visual studio에. 전체 타격 나중에 쓰기를 위한 출발점을 제공합니다). 다음 샘플 그래프 당 바로 다음 HTML 렌더링:
해당 HTML:
<html> <바디> <센터> <테이블 너비 = 80%> <tr><td><센터>가로 막대 그래프</td></tr> <tr> <td 정렬 = "센터"> <표 테두리 = "1" 너비 = 80%> <tr> <td width = 10%>오픈</td> <td><테이블의 cellpadding ="0" cellspacing ="0" 국경 = 0 너비 = 50%><tr bgcolor = 빨간색><td> </td></tr></테이블></td> </tr> <tr> <td width = 10%>폐쇄</td> <td><테이블의 cellpadding ="0" cellspacing ="0" 국경 = 0 너비 = 25%><tr bgcolor = 빨간색><td> </td></tr></테이블></td> </tr> <tr> <td width = 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 라인.
- 매개 변수 XML 파일 럽 하지 않았다 (XSL에서 별도 및 DVWP 자체 수정에 갈 때 무슨 뜻인지 알게 될 거 야; 파일을 수정할 수 있습니다.). 그러나, 그것을 간단 하 게 하기 위해, XSL에서 거의 모든 그들을 제거 했 어. 즉 수 있도록 하려는 경우 이러한 매개 변수 사용, XSL에 다시 그들의 변수 정의 추가 하기만 하면. Visual studio 프로젝트에는 원래 XSL 변수 정의 할 것 이기 때문에 쉽게 될 것입니다..
- 복사 하 여 visual studio 프로젝트에 직접 붙여넣기이 수 해야. 다음, 내 전화를 제거 하 고 "ShowBar"를 직접 호출을 삽입.
- 작품을 만들어 내려 드릴은 <a 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을 통해 얻을 하는 방법. 아무도에 관심이 있다면, 내가 그것을 밖으로 시도 하 고 단점을 보완 하기 밖으로 작동 하도록 설득할 수 있습니다.. 누군가가 이미 하는 경우, 알려주세요 그리고 난 당신의 블로그에 링크 기꺼이 드리겠습니다 🙂
나는 생각 한다 도전 수직 그래프와 그래프의 레이블을 관리 하기가 더 어렵습니다., 하지만 확실히 불가능.
필드 이름 잡았다:
적어도 두 가지 필드 이름에 대 한 밖을 봐합니다.
첫 번째, 공간 필드 이름에 XSL에 이스케이프. 이 문제가 여기 있을 것입니다.:
<xsl:변수 이름="totalProposed"
선택="개수(/dsQueryResponse/행/행[정상화 공간(@Status) '제안' =])" />
경우 "상태" 열 상태 코드 "라는 사실" 그런 다음 "Status_x0020_Code"로 참조 해야:
<xsl:변수 이름="totalProposed"
선택="개수(/dsQueryResponse/행/행[정상화 공간(@Status_x0020_Code) '제안' =])" />두 번째, 나는 이것에 약간 퍼지, 필드 이름 변경에 대 한 경계 해야 하지만. 당신이 당신의 분야 "상태 코드의 이름을 하는 경우" 그리고 나중에, 이름을 "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
행복 한 변화!
<끝 />
이 페이지는 거의 내가 찾던 작업 완료.
SharePoint 설문 조사 목록을 사용 하 여 주간 설문 조사를 작성 하 고 싶어 그룹을가지고. 캐치? 그들은 코드를 보고 싶지 않아… 그들은 설문 조사를 보낼 때마다 시스템 변경 또는 (주간 업데이 트에 대 한 계획).
설문 조사 목록에 이것을 연결 하 고 응답의 첫 번째 열에 있는 그래프를 만들 수 있었습니다.. 값 및 레이블 필요 합니다는 비록 예측할 수 없습니다 앞으로 이동. 설상가상 더 그들이 있을 수 있습니다 더 많거나 적은 답변 사용할 수 각 주.
만약에서 다른 곳에서 보이는 것입니다., 그러나 누구 든 지 행 및 사용 가능한 옵션 및 이러한 설정을 동적으로 보다는 오히려 예상 값을 하드 코딩 수 기반으로 레이블을 만들 수 있는 방법을 발견 했다?
감사 폴. 매우 도움이. 귀하의 작업을 감사, 기존 DVWP에 그래프 바 열을 추가할 수 있었습니다. (예를 들어. 작업에 대 한) 코드의 단지 몇 줄으로 아주 쉽게.
SharePoint Designer에서, 제목으로 데이터 뷰를 삽입 하 고 % 작업 목록에서 열을 완료. 셀 중 하나에 커서를 배치 하 고 마우스 오른쪽 단추로 클릭. 내가 선택 오른쪽에 열 삽입. 코드 보기에서, 발견은 <td> 대체는 <xsl:귀하의 코드와 셀 내부 텍스트 요소:
<테이블의 cellpadding ="0" cellspacing ="0" 국경 ="0"
너비 = "{라운드(@PercentComplete * 100)+1}%">
<tr 스타일 = "배경 색상:레드 ">
<xsl:텍스트 사용 안 함-출력-탈출 = "yes"><![CDATA[ ]]></xsl:텍스트>
</tr>
</테이블>
참고 배경색에서 행 색상 코드를 변경 "레드 =" 스타일 = "배경 색상:레드"
또한, 내 목록에 있는 열 중 하나를 선택할 수 있었다 (@PercentComplete) "$BarPercent 대신"
그렉
또 다른 방법 (SharePoint UI를 사용 하 여):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20">
선택 합니다 "개수 =(/dsQueryResponse/행/행[정상화 공간(@Status)'WIP' =])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701이 안 Morrish 5 월에 게시 2006. MOSS에서 보았습니다. 2007 그것은 잘 작동 하 고. GAC에 추가, iisreset을 execadmsvcjobs…
그레이트 게시물, 감사!
그레이트 게시물, 감사!
안녕 폴!
잘 했 어! 또한 그래픽 방식으로 SharePoint 목록을 볼 수있는 내 마음에서 이런 일이 있었다 😉
나는 셰어의 '사용하여 대시 보드를’ 질문. 우리는 우리의 인트라넷에 대한 MOSS 표준을 사용하여 군 병원이며, 우리의 명령 그룹은 '실시간으로 볼 수 있도록 대시 보드를 구축하고 싶습니다’ 가능 하다 면. 주요 포인트 중 하나는 시설 내에서 실시간으로 현재 작업 보고 고 그대로 위아래로 변경 (클릭 해야 할 수도 있습니다. “새로 고침”/F5).
감사 사전에,
이 효과 달성 하기 위해 jQuery와 유용한 뭔가 할 수 있습니다. 나에 게 이메일 galvin.paul@gmail.com 그리고 시도 하 고 줄 드리겠습니다..