개요:
(업데이트 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
행복 한 변화!
<끝 />