기술연구소님, 안녕하세요.

메시어스입니다.

문의하신 내용과 관련하여 답변 및 재확인 요청 드립니다.

문의 1) c.value에는 매출 예상 데이터와 매출 실적 데이터가 있습니다. c.series에는 a_plan부터 e_plan이 있습니다. c.series2에는 a_act부터 e_act가 있습니다. 

=> 말씀하신 내용의 C는 앞서 말씀하신 "직원 C"로 추측이 됩니다. 이 경우 c.series는 직원 C의 매출 예상에 대한 라인이고, C.series2는 직원 C의 실제 매출에 대한 누적 막대 그래프가 될 부분으로 해석이 됩니다.

그런데, "C.series에는 a_plan부터 e_plan이 있습니다."라고 하신 것은 직원 C가 직원 A부터 직원 E까지의 매출 예상 데이터를 가지고 있다는 것으로 이해됩니다.

이는 일반적인 데이터의 포함 관계가 아니기 때문에, 해당 내용에 대한 이해가 어려운 상황입니다.

혹시 C.series에는 C의 시기별 매출 예상 데이터가 포함되어있다는 것을 의미하신 것일까요?

문의 2) 왼쪽 y축에는 c.series의 axis가 오른쪽 y축에는 c.series2의 axis가 그려져야합니다.

=> 라인 그래프의 y축은 좌측에, 누적 막대그래프의 y축은 우측에 그리는 방법을 문의하신 것으로 예상됩니다. 만약 맞으시다면 해당 기능은 아래 링크된 도움말을 참고하여주시기 바랍니다.

- 다중 축 데모

감사합니다.

메시어스 드림

안녕하세요 메시어스입니다.

공유 감사드리며 말씀하신 내용을 구현하기 위해서는 먼저 상단의 범례를 기본 범례로 설정한 뒤 라인 차트 유형의 범례 위치를 기본 위치로 재설정 및 Column 차트 유형의 범례는 숨김 처리해줍니다.

그 다음 차트 오른쪽에 표시된 범례들은 ListBox 컨트롤을 이용하여 사용자 정의해주시며 범례를 클릭할 때 series들을 강조 표시하기 위해 차트의 hostElement에서 클릭 이벤트를 처리해주시면 됩니다. 

자세한 코드는 아래 샘플으 참고하여 주시기 바랍니다.

다른 궁금한 점이 생기면 문의주시기 바랍니다.

감사합니다.

메시어스 드림

안녕하세요 메시어스입니다.

오랜 기간 기다려주신 점 감사합니다.

본사 개발팀에 확인해본 결과 안타깝게도 stacking의 경우, 오른쪽 y축에 대해서 지원하지 않기 때문에 언급하신 데이터(Act_a~Act_e)에 대해서 오른쪽 y축으로 설정할 수는 없습니다. 다만 문의 내용에 대한 workaround로 데이터를 수정하여 Column series 데이터가 먼저 데이터 소스에 오도록 한 뒤(왼쪽에 Column series들의 y축 설정), Line series 데이터를 설정해보시기 바랍니다(오른쪽에 Line series들의 y축 설정). 

아래 샘플에서 결과를 확인할 수 있습니다.

다른 궁금한 점이 생기면 문의주시기 바랍니다.

감사합니다.

메시어스 드림

안녕하세요 메시어스입니다.

차트의 축 범위의 경우, FlexChart가 바인딩될 때 자동으로 축이 계산되어 설정되며 일반적으로 이 때 최소 및 최대 속성을 설정해주시면 됩니다. 아래 코드 및 도움말 문서를 참고하여 주시기 바랍니다. 

<wj-flex-chart :initialized="initializeChart">

(...)

  methods: {
    initializeChart: function (flexchart) {
      this.chart = flexchart;
      this.chart.axisY.max = 20000000;
    },

- 축 범위 설정 도움말

다만 차트 데이터가 동일할 때 max가 설정되지 않는 현상과 관련하여 저희 쪽에서 재현이 되지않아 정확한 원인 파악이 어려운 상황입니다. 관련하여 차트 데이터를 재조회하여 바인딩 후, max 값을 재설정해보시기 바라며 현상이 해결 되지 않을 경우 저희 쪽으로 재현 가능한 샘플 프로젝트를 공유해주신다면 재현 및 디버깅 후 답변드리도록 하겠습니다.

감사합니다.

메시어스 드림