navigation (legend properties)

범례 항목이 많아 여러 페이지로 나뉠 때 표시되는 페이지 이동 화살표를 설정합니다.
범례가 maxHeight나 차트 높이를 넘을 때 표시됩니다.

Info

name type required(default) description
navigation object 선택 범례 항목이 많아 여러 페이지로 나뉠 때 표시되는 페이지 이동 화살표를 설정합니다.
navigation.enabled boolean 선택(true) 페이지 이동 사용 여부
navigation.activeColor color 선택(#0022ff) 누를 수 있는 화살표 색상
navigation.inactiveColor color 선택(#cccccc) 누를 수 없는 화살표 색상
navigation.arrowSize number 선택(12) 화살표 크기(px)
navigation.animation boolean or object 선택(true) 페이지 이동 애니메이션
navigation.style object 선택({fontSize: "0.8em"}) 페이지 번호 글자 스타일

Example

myChart.setOptions({
  chart: {
    type: "line"
  },
  legend: {
    layout: "vertical",   // 세로로 나열해 화면 너비와 상관없이 높이를 넘게 함
    align: "right",
    verticalAlign: "middle",
    maxHeight: 120,
    navigation: {
      activeColor: "#3E576F",
      inactiveColor: "#CCCCCC",
      arrowSize: 10
    }
  },
  series: [
    { name: "서울특별시", data: [60, 40, 20, 80] },
    { name: "인천광역시", data: [30, 50, 90, 70] },
    { name: "부산광역시", data: [40, 70, 30, 60] },
    { name: "대구광역시", data: [20, 30, 50, 40] },
    { name: "광주광역시", data: [50, 60, 40, 30] },
    { name: "대전광역시", data: [70, 20, 60, 50] },
    { name: "울산광역시", data: [35, 45, 55, 65] },
    { name: "세종특별자치시", data: [15, 25, 35, 45] },
    { name: "경기도", data: [65, 55, 45, 35] },
    { name: "강원특별자치도", data: [25, 35, 45, 55] },
    { name: "충청북도", data: [45, 25, 65, 35] },
    { name: "충청남도", data: [55, 65, 25, 45] }
  ]
}, {
  append: true,
  redraw: true
});

제공 버전

version desc
7.3.0.0