HTML5 Sparkline Chart for Data-Intense Visualizations

HTML5 Sparkline Chart for Data-Intense Visualizations

"강렬하고 단순하며 단어 크기의 그래픽"으로 설명되는 Sparklines는 단순한 선을 넘어섭니다.

8min read

일반 차트의 축소되고 단순화된 버전으로, 많은 데이터를 빠르게 분석하고 추세를 파악하는 데 탁월합니다. 좀 더 궁금하신 분들을 위해, Sparkline의 발명가가 Sparkline의 이론과 실습에 대한 Q&A 게시판을 호스팅하여 일반적인 해야 할 일과 하지 말아야 할 일, 그리고 사람들이 Sparklines가 유용하다고 생각하는 다양한 시나리오를 찾을 수 있습니다. 더 많은 것을 원한다면 Excel 블로그의 Sparklines에 대한 시각적으로 풍부한 블로그도 있습니다. 일반적인 예는 "텍스트와 인라인"이지만 그리드의 일부로 유용한 여러 경우가 있습니다. 적어도 내가 본 바에 따르면, 나는 이 용어를 선과 영역은 물론 축, 범위, 마커, 추세선이 있거나 없는 열과 막대 등 모든 종류의 작은 시각화에 대한 동의어로 받아들입니다. 데이터 차트 가지고 있는 스위치와 노브가 너무 많지는 않지만 작게 유지하면서 데이터 집약적일 수 있습니다. 참고로 이 차트는 여전히 단순해야 하며 차트에 모든 추가 정보를 표시할 수 있더라도 항상 최상의 디자인은 아닐 수 있습니다!

The Ignite UI Sparkline

일련의 데이터 시각화 컨트롤이 우리의 Ignite UI 제품인 강력한 데이터 차트, Pie, C#에서 jQuery로 변환된 지리적 지도에 등장한 후 더 확장하는 것이 논리적이었습니다. 스파크라인은 HTML5 Canvas 경로를 취하는 또 다른 컨트롤의 일부로, 플러그인이 없고 대부분의 모바일 장치에서 사용할 수 있습니다. 이 특정 차트는 가볍게 설계되었으므로 너무 많은 추가 벌크를 기대하지 마십시오 – 4개의 디스플레이 유형으로 지원되는 단일 시리즈와 제한된 양의 라벨링이 있는 단일 축 세트 등.

기본값은 line series입니다.

$("#Spark0").igSparkline({
    displayType: "line",
    dataSource: employees,
    valueMemberPath: "SickLeaveHours",
    height: "50px",
    width: "50%",
    normalRangeMaximum: 49,
    normalRangeMinimum: 45,
    normalRangeVisibility: "visible",
    verticalAxisVisibility: "visible",
    highMarkerVisibility: "visible",
    lowMarkerVisibility: "visible"
});
정상 범위 및 높음/낮음 마커가 있는 라인

선을 영역으로 바꾸고 마커를 다른 축으로 바꿉니다.

두 축이 모두 표시되는 영역

추세선이 있는 열 계열:

Column with 'quinticFit' trendline

and Win / Loss :

수직 축과 'exponentialAverage' 추세선이 위의 열과 동일한 데이터를 표시하는 Win/Loss

두 막대 차트는 동일한 데이터를 사용합니다. 이 둘의 차이점은 Win-Loss는 불리언 스케일이라는 것인데, 이는 제시된 포인트가 해당 값과 일치하지 않는다는 것을 의미합니다 – 전체 이득, 전체 손실 또는 중립입니다.

몇 가지 유형의 마커와 13가지 추세선 유형이 있으며 모든 것에 대한 시각 자료가 포함된 매우 멋진 igSparkline 개요 기사가 있으므로 이 컨트롤이 제공해야 하는 모든 것을 못한 경우를 대비하여 해당 마커를 완전히 확인해야 합니다. 물론 링크 된 기사에서 알 수 있듯이 Sparkline은 주로 인라인을 대상으로하며 위의 것들은 다소 큽니다. 약간의 조정을 통해 인라인으로도 작동하도록 할 수 있습니다.

CSS (인라인, 테두리 및 배경 제거)가 조정되고 텍스트와 함께 표시되도록 크기가 줄어든 스파크 라인

이 모든 것은 매우 작은 공간에 흩어져 있는 매우 많은 양의 데이터에 대해 의미 있는 시각화를 하고 이를 최대한 활용하기 위한 것입니다. 따라서 예, 텍스트와 함께 인라인하는 것은 훌륭하며 그리드 셀 내부에서도 이러한 차트는 단일 셀에 있는 다른 테이블 전체의 '요점'을 제공할 수 있고 읽기도 더 쉽습니다. 후속 블로그에서 더 자세히 알아보세요. 곧 실제로 올라올 예정입니다!

팁과 트릭

그래서 여기에 당신이 흥미롭고 유용하다고 생각할 수 있는 것들의 구색이 있습니다. 예를 들어, 값과 멤버 경로가 선택 사항이라는 사실과 마찬가지로 데이터 소스는 단순한 숫자 배열일 수 있으며 값 경로를 지정할 필요가 없습니다. 레이블 경로는 축을 표시할 때만 필요합니다.

데이터 꾸미기: 스타일링 가이드

또 다른 흥미로운 주제는 여전히 데이터 시각화 컨트롤이며 웹용이라는 것입니다. 그래서 저는 여러분이 테마가 있는 스타일링 igDataChart를 가장 많이 보았기를 바라며, 아마도 다른 컨트롤에 대해서도 그리고 Sparkline이 동일한 작업을 수행할 수 있는지 궁금하다면 ... 왜 예, 예, 할 수 있습니다! 그리고 여기에 이 컨트롤의 모양을 수정하는 데 사용할 수 있는 멋진 CSS 클래스 목록이 있습니다.

모든 클래스에는 "ui-sparkline-"이 접두사로 붙으며 "sparkpath", "negativesparkpath", "trendline", "markers", "firstmarker", "lastmarker", "highmarker", "lowmarker", "negativemarkers", "range"에 적용됩니다. 예를 들어, 스파크 경로, 높은 마커와 낮은 마커가 있습니다.

CSS Sparkline 클래스가 시각적 요소의 옵션에 매핑되는 방식을 나타냅니다

CSS 불투명도와 함께 CSS 배경색은 해당 요소의 브러시 색상에 매핑됩니다. 테두리 너비(및 너비만, 이 예제가 속기 선언을 표시하는 것과 무관함)는 브러시 크기에 해당합니다. 높은 마커가 낮은 마커보다 크다는 것을 알 수 있을 만큼 충분히 볼 수 있다고 생각합니다. 거의 모든 것이 1.5px의 최소값을 가지며 더 낮은 값만 무시합니다. 모든 마커, 선 및 범위에 사용할 수 있는 값이 있습니다.

/* "background-color", "opacity", "border-width" apply */
.ui-sparkline-sparkpath {
    background:#00AADE;
    border:1.5px solid
}
.ui-sparkline-negativesparkpath {
    background:#D0284C;
    border:1px solid
}
.ui-sparkline-trendline {
    background:#555;
    border:2px solid
}
.ui-sparkline-markers {
    background:#36C0F3;
    border:3px solid
}
.ui-sparkline-firstmarker {
    background:#19994F;
    border:5px solid
}
.ui-sparkline-lastmarker {
    background:#FCB025;
    border:5px solid
}
.ui-sparkline-highmarker {
    background:#BFE107;
    border:4px solid
}
.ui-sparkline-lowmarker {
    background:#AF39FF;
    border:3px solid
}
.ui-sparkline-negativemarkers {
    background:#E5516F;
    border:3px solid
}
.ui-sparkline-range {
    background:gray;
    opacity:.2
}

열 측면에서 경로는 분명히 채우기로 적용됩니다. 축의 경우 약간 다른 규칙이 있습니다 - border는 이번에 색상도 고려된 축 스트로크에 해당하며 분명히 배경은 없지만 축 레이블의 글꼴과 색상이 사용됩니다.

/* "border-width", "border-color", "color", "font" apply */
.ui-sparkline-axis-x {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D
}
.ui-sparkline-axis-y {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D;
}

​중요한 점은 이러한 클래스가 API에서 볼 수 있는 컨트롤 옵션에 해당하지만 초기화 중에 고려된다는 것입니다. 그래서 시각적인 것과 기능성 사이의 관심사를 분리하는 것이 좋습니다.. 예를 들어 🙂 디자이너가 나보다 더 나은 색상을 선택할 수 있도록합니다.그러나 런타임에서 모양을 수정하려면 jQuery 옵션을 사용해야합니다.

기타

스니펫에서 눈치채셨겠지만 Sparkline의 너비는 백분율로 설정할 수 있으며 다른 Ignite UI 차트와 마찬가지로 크기 조정 처리 기능이 내장되어 있습니다. 즉, 이 차트는 반응형 디자인에 적합하며 다양한 크기의 요소를 포함하는 내부에서도 잘 작동하므로 차트를 그리드 셀로 시도할 때 중요한 역할을 합니다.

또한, 가장 합리적인 시나리오는 (내 데모의 나쁜 데이터에 관계없이) 추세를 분석하는 것이기 때문에 연속성과 일반적으로 시간 제한 축을 의미하며 우리 모두는 JavaScript 날짜의 기본 문자열 출력의 지옥을 알고 있습니다. 이러한 작은 차트에는 적합하지 않지만 간단한 기능을 사용하여 원하는대로 레이블 형식을 지정할 수 있습니다. "would've-been" 값을 매개 변수로 사용하고 대신 원하는 새 레이블 값을 반환해야 합니다. 이 이벤트는 여러 번 발생할 수 있으며 다른 축(보이는 축이 있는 경우)에 대해서도 발생할 수 있음을 명심하십시오 – 이 경우 항상 올바른 값의 서식을 지정하고 있는지 확인하십시오. 그리고 마지막으로 한 가지 - 날짜 값은 이미 문자열로 변환되어 있습니다.

$("#Spark1").igSparkline({
    labelMemberPath: "HireDate",
    verticalAxisVisibility: "visible",
    horizontalAxisVisibility: "visible",
    formatLabel : function formatFunction(val) {
        if (typeof val === "string") {
            // remove time from the label
            val = val.split("T")[0];
        }
        return val;
    }
    //...
});

마감 및 리소스

위의 정보가 도움이 되길 바랍니다. 다양한 유형의 Sparkline 시각적 개체, 인라인 설정, 초기화, 도구 설명 이벤트 처리 및 스타일링에 대한 예제가 포함된 아래 데모 링크가 있습니다. 이 정보에 대한 게시물이 곧 하나 더 올라올 예정이므로 그것도 주시하십시오.

몇 가지 생각을 듣고 싶으니 아래에 댓글을 남겨주세요 또는@DamyanPetev.

그리고 언제나처럼 Twitter에서 저희를 팔로우할 수 있습니다@ Infragistics그리고 계속 연락하세요페이스북,구글+그리고링크드인!

어떻게
데모 요청