시각 장애인을 위한 기능과 패턴

시각 장애인을 위한 대체 텍스트 사용하기

알메이트 차트는 차트의 내용을 인식하기 어려운 시각 장애인을 위해서 대체 텍스트 기능을 제공합니다. 차트에 데이터(차트에 대한 자세한 설명)를 삽입하였을 경우 알메이트 차트는 차트 내에 삽입된 데이터를 대체 텍스트로 저장합니다. 사용자는 대체 텍스트를 읽어 줄 수 있는 프로그램이나 기기를 이용하여 대체 텍스트 내용을 이해할 수 있습니다. 대체 텍스트를 읽어 줄 수 있는 프로그램이나 기기와 관련하여 알메이트 차트에서 취급하거나 제공하는 기능은 없습니다. 또한 이 기능의 이용을 위해 사용자가 특별히 조작하거나 수정해야할 부분도 없습니다. 대체 텍스트 기능의 사용을 위해서는 다음과 같이 chartVars 변수를 설정해야 합니다. chartVars 변수 설정에 대한 자세한 내용은 차트 생성 함수를 참조하십시요.

chartVars += "&accessibility=true";

패턴 사용하기

색맹, 색약 사용자들은 차트에 적용된 색을 구분하기 어려울 수 있습니다. 이런 사용자들에게는 차트에 서로 다른 색을 적용해서 차트의 가독성을 높이기 보다는 서로 다른 패턴을 적용해서 차트의 가독성을 높이는 것이 더 바람직할 것입니다. 알메이트 차트에서는 기본적으로 20 가지의 패턴을 제공하며 사용자는 이를 수정하거나 자신이 원하는 패턴을 등록할 수 있습니다. 패턴을 사용하기 위해서는 다음과 같이 chartVars 변수를 설정하고, 패턴 이미지가 존재하는 디렉토리 명(url)과 패턴 이미지 파일명을 등록해야 합니다. 아래 코드 예는 알메이트 차트에서 기본으로 제공하는 20 가지의 패턴 이미지 파일을 등록하는 것을 보여줍니다.

chartVars += "&usePattern=true";
rMateChartH5.patternImageBaseUrl = "../rMateChartH5/Assets/Patterns/";
rMateChartH5.patternImagesUrl = [
  "diagonal_ltr.png",
  "diagonal_rtl.png",
  "diagonal.png",
  "horizontal.png",
  "vertical.png",
  "both.png",
  "up.png",
  "right.png",
  "horizontal_curve.png",
  "vertical_curve.png",
  "horizontal_pipe.png",
  "vertical_pipe.png",
  "rectangle.png",
  "circle.png",
  "diamond.png",
  "triangle.png",
  "down_triangle.png",
  "cross.png",
  "rectangle2.png",
  "circle.png"
];

위와 같이 패턴 이미지가 존재하는 디렉토리와 파일명들을 등록한 다음, 패턴을 이용하려고 하는 차트의 enablePattern 속성값을 “true” 로 설정하면 차트에 패턴이 적용됩니다. 다음은 라인 차트에 패턴을 사용하는 코드와 이를 적용해서 출력한 차트의 예제입니다.

...
<Line2DChart showDataTips="true" enablePattern="true">
...

See the CodePen 알메이트 차트 - 차트에 패턴 적용

사용자 정의 패턴 사용하기

패턴 사용시 각 시리즈에 적용되는 패턴의 종류는 등록된 패턴 이미지 파일 중에서 자동으로 하나를 선택하여 적용합니다. 하지만 경우에 따라서 사용자가 원하는 패턴을 직접 적용할 필요가 있습니다. 이를 위해서 사용자 정의 패턴을 사용합니다. 사용자 정의 패턴을 적용하기 위해서는 시리즈의 patternJsFunction 속성값에 실행할 자바스크립트 함수명을 지정하고, 해당 함수의 코드를 작성해야 합니다. 다음은 이를 컬럼 차트에 사용하는 코드와 이를 적용해서 출력한 차트의 예입니다. 이 예에서는 값이 1500 이하이면 등록된 패턴 이미지 배열 중에서 5 번째 인덱스에 해당하는 이미지(both.png)를 적용하고, 값이 1500 이상 2500 이하이면 등록된 패턴 이미지 배열 중에서 14 번째 인덱스에 해당하는 이미지(diamond.png)를 적용합니다.

...
<Column2DChart showDataTips="true" patternMode="true">
...
   <Column2DSeries yField="Profit" displayName="Profit" patternJsFunction="patternFunc">
...
 
function patternFunc(id, values, patternIndex) {
  if (values[1] <= 1500)
    return 5;
  else if (values[1] >= 1500 && values[1] <= 2500)
    return 14;
  else
    return 19;
}

See the CodePen 알메이트 차트 - 차트에 사용자 정의 패턴 사용하기

목차

시각 장애인을 위한 기능과 패턴

시각 장애인을 위한 대체 텍스트 사용하기

패턴 사용하기

사용자 정의 패턴 사용하기