픽토리얼 차트

픽토리얼 차트는 SVG를 활용하는 차트로 일련의 데이터의 수치를 SVG의 크기, 개수 또는 내부에 색상을 채움으로 표현하는 차트입니다. 픽토리얼 차트는 <PictorialChart> 노드의 series 속성값에 <PictorialSeries> 노드를 설정하여 생성할 수 있습니다. 픽토리얼 차트에서 수치를 표현하는 방법은 <PictorialSeries> 노드의 itemRenderer에 따라 다르게 표현할 수 있습니다. 다음에는 itemRenderer 속성에 설정 가능한 값과 이에 따른 표현 방식이 설명되어 있습니다.

PictorialH100PerItemRenderer : 값을 하나의 SVG에 가로로 나누어 색상으로 표현합니다.(기본값)
PictorialV100PerItemRenderer : 값을 하나의 SVG에 세로로 나누어 색상으로 표현합니다.
PictorialHSizeItemRenderer : 값의 개수에 맞춰 SVG를 가로로 나열하고, 각 값들을 크기로 표현합니다.
PictorialHFillItemRenderer : 값의 개수에 맞춰 SVG를 가로로 나열하고, 각 값들은 색상을 채워 표현합니다.
PictorialVFillItemRenderer : 값의 개수에 맞춰 SVG를 세로로 나열하고, 각 값들은 색상을 채워 표현합니다.
PictorialBarItemRenderer : Bar 차트와 비슷한 모양으로 SVG 들을 나열하고, 각 값들은 개수와 색상으로 표현합니다.
PictorialColumnItemRenderer : Column 차트와 비슷한 모양으로 SVG 들을 나열하고, 각 값들은 개수와 색상으로 표현합니다.
PictorialCountItemRenderer : 왼쪽 상단부터 오른쪽으로 SVG들을 나열하고, 필요한 경우 줄바꿈이 허용됩니다. 각 값들은 개수와 색상으로 표현합니다.
PictorialCountStackItemRenderer : PictorialCountItemRenderer와 동일하나, 차트의 itemRenderer가 모두 PictorialCountStackItemRenderer일 경우 각 Series를 하나로 이어서 값들을 표현합니다.

PictorialH100PerItemRenderer

다음은 itemRenderer로 PictorialH100PerItemRenderer를 적용한 차트의 예제입니다.

<PictorialChart>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_banana.svg” itemRenderer=”PictorialH100PerItemRenderer”>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 H100Per 차트

PictorialV100PerItemRenderer

다음은 itemRenderer로 PictorialV100PerItemRenderer를 적용한 차트의 예제입니다.

<PictorialChart>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_coffee.svg” itemRenderer=PictorialV100PerItemRenderer>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 V100Per 차트

PictorialHSizeItemRenderer

다음은 itemRenderer로 PictorialHSizeltemRenderer를 적용한 차트의 예제입니다. 데이터의 개수만큼 Item을 가로로 추가하며, 값에 따라서 Item의 크기가 커집니다.

<PictorialChart>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_baby.svg” itemRenderer=”PictorialHSizeItemRenderer”>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 HSize 차트

Icon 위치선정 로직

아래의 Pictorial차트에서는 PictorialChart 하위에 PictorialSeries 하위에 ChartItem 하위에 Icon이라는 단위를 정의합니다. Icon의 경우 입력된 SVG에 반드시 정비례하게 크기가 조절되며, 차트 크기에 너비와 높이 중 큰 쪽을 맞췄을 때, 작은 부분은 최소 여백으로 처리하여 중앙정렬합니다. <PictorialChart> 노드의 iconHorizontalAlign, iconVerticalAlign로 정렬을 변경할 수 있고, iconVerticalMinGap, iconHorizontalMinGap으로 최소 여백보다 크게 여백을 설정할 수 있습니다.

PictorialHFillItemRenderer

다음은 itemRenderer로 PictorialHFilltemRenderer를 적용한 차트의 예제입니다. 데이터의 개수만큼 Item을 가로로 추가하며, 각 Item은 1개의 Icon을 가지고 있습니다. Icon의 최대값은 <PictorialChart> 노드의 perIconValue로 설정할 수 있습니다.

<PictorialChart perIconValue=”100”>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_man.svg” itemRenderer=”PictorialHFillItemRenderer”>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 HFill 차트

PictorialVFillItemRenderer

다음은 itemRenderer로 PictorialVFilltemRenderer를 적용한 차트의 예제입니다. 데이터의 개수만큼 Item을 세로로 추가하며, 각 Item은 1개의 Icon을 가지고 있습니다. Icon의 최대값은 <PictorialChart> 노드의 perIconValue로 설정할 수 있습니다.

<PictorialChart perIconValue=”100”>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_play.svg” itemRenderer=”PictorialVFillItemRenderer”>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 VFill 차트

PictorialBarItemRenderer

다음은 itemRenderer로 PictorialBarltemRenderer를 적용한 차트의 예제입니다. Bar 차트 모양의 ItemRenderer로 값을 SVG의 개수와 색상을 채워 표현합니다. Icon의 최대값은 <PictorialChart> 노드의 perIconValue로 설정할 수 있습니다. 각 Item은 값에서 perIconValue를 나눈 후 올림한 것 만큼의 개수을 가지고 있습니다. (예: data 105, perIconValue 10일 경우 Icon은 11개이고 마지막 아이콘은 5/10 만큼의 색상을 채웁니다.)

<PictorialChart perIconValue=”10”>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_heart.svg” itemRenderer=”PictorialBarItemRenderer”>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 Bar 차트

PictorialColumnItemRenderer

다음은 itemRenderer로 PictorialColumnltemRenderer를 적용한 차트의 예제입니다. Column 차트 모양의 ItemRenderer로 값을 SVG의 개수와 색상을 채워 표현합니다. Icon의 최대값은 <PictorialChart> 노드의 perIconValue로 설정할 수 있습니다. 각 Item은 값에서 perIconValue를 나눈 후 올림한 것 만큼의 개수을 가지고 있습니다. (예: data 105, perIconValue 10일 경우 Icon은 11개이고 마지막 아이콘은 5/10 만큼의 색상을 채웁니다.)

<PictorialChart perIconValue=”1000”>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_like.svg” itemRenderer=”PictorialColumnItemRenderer”>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 Column 차트

PictorialCountItemRenderer

다음은 itemRenderer로 PictorialCountltemRenderer를 적용한 차트의 예제입니다. 좌측 상단부터 값을 SVG의 개수와 색상을 채워 표현합니다. itemRows, itemColumns로 행과 열의 개수를 지정하고, itemColumns를 기준으로 줄바꿈하여 아랫줄에서 다시 SVG를 표현합니다. Icon의 최대값은 <PictorialChart> 노드의 perIconValue로 설정할 수 있습니다. 각 Item은 값에서 perIconValue를 나눈 후 올림한 것 만큼의 개수을 가지고 있습니다. (예: data 105, perIconValue 10일 경우 Icon은 11개이고 마지막 아이콘은 5/10 만큼의 색상을 채웁니다.)

<PictorialChart perIconValue=”88000” itemColumns=”11”>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_kombucha.svg” itemRenderer=” PictorialCountItemRenderer”>
      <showDataEffect>
        <SeriesInterpolate/>
      </showDataEffect>
    </PictorialSeries>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 Count 차트

PictorialCountStackItemRenderer

다음은 itemRenderer로 PictorialCountStackltemRenderer를 적용한 차트의 예제입니다. PictorialCountItemRenderer와 동일하게 동작되나, 만약 모든 ItemRenderer가 PictorialCountStackItemRenderer라면, 모든 데이터가 이전 데이터에 이어서 그려집니다

<PictorialChart perIconValue=”2”>
  ...
  <series>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_1618.svg” itemRenderer=” PictorialCountStackItemRenderer”/>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_1315.svg” itemRenderer=” PictorialCountStackItemRenderer”/>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_0712.svg” itemRenderer=” PictorialCountStackItemRenderer”/>
    <PictorialSeries url=”…/ rMateChartH5/Assets/Images/picto_0006.svg” itemRenderer=” PictorialCountStackItemRenderer”/>
  </series>
</PictorialChart>

See the CodePen 알메이트 차트 - 픽토리얼 CountStack 차트

목차