하이 차트 - 범례 배치 (왼쪽 및 오른쪽/x 및 y)

내 Highchart 솔루션을 사용하면 어느 한 지점에 어떤 시리즈가 표시되는지 제어 할 수 있습니다. 사용할 수있는 시리즈의 양 때문에, 나는이 기능을 개시시에 모두 추가하는 대신 체크 박스에 기능을 확장하고 처음에는 다수를 숨김으로써 전설을 거대하게 만듭니다.하이 차트 - 범례 배치 (왼쪽 및 오른쪽/x 및 y)

차트를 통합하여 보이게하기 위해 단추를 오버레이하고 싶습니다. legend.x에 음수 값을 지정하여 단추를 넣을 자리를 옮길 수 있으므로 문제가 없습니다. 그러나 범례가 원래의 너비를 유지하고 너무 많은 경우 측면에 대한 옵션을 잃어 버리기 때문에 더 많은 시리즈가 프로그래밍 방식으로 추가 될 때 문제가 발생합니다.

이것은 내 문제의 피들 삭제 된 것입니다 : https://jsfiddle.net/paLoxcy3/.

legend: { 
    align: "right", 
    x: -100 
}

이 그래프는 반응 폭을 유지하기 위해 필요 여기에 추가 가치, 그래서 난 그냥 width를 추가 할 수 없습니다 :이 관련 조각입니다. 제쳐두고, 제가 이것을했습니다 (그리고 시리즈 이름이 결국 현재의 피들에서 한 줄을 떨어 뜨릴 때), 그러면 그들은 원하지 않는 왼쪽 정렬이됩니다.

나는 legend의 옵션과 함께 좋은 플레이를 주위했지만,이 시점에서 효과적으로 어떻게 든 수동으로 할 chart.events.load 및 chart.events.redraw 사용하는 것입니다 전설 홀더에 padding-right를 추가 할 수있는 유일한 솔루션을 가정 한? 및 marginBottom을 추가하는 옵션이 있지만 marginLeft 및 marginRight이 아닌 것은 약간 짜증나게됩니다.

많은 도움을 주셨습니다. 문서 바로 가기는 here이므로 시간을 절약 할 수 있습니다 :)

출처

2016-06-28 Ian

안녕하세요,이 문제에 대한 정보 주셔서 감사합니다. 그게 renderItem 함수의 작은 문제라고 생각합니다. 여기이 기능을 변경했을 때 어떻게 작동하는지 볼 수 있습니다 : https://jsfiddle.net/paLoxcy3/1/ –

Perfect. 도와 주셔서 감사 드리며 이미 Github에 버그를 기록해 주셔서 감사합니다. – Ian

내 사례가 도움이되었음을 읽어 주셔서 감사합니다. 답변으로 게시했습니다. –

이 문제는 Highcharts legend.renderItem 함수의 작은 문제와 관련이 있다고 생각합니다. 이 문제를 해결하려면 항목을 다른 행으로 이동시키는 책임이있는 경우 변경할 수 있습니다. 여기에이 문은 코드에서 어떻게 보이는지 확인할 수 있습니다

// if the item exceeds the width, start a new line 
     if (horizontal && legend.itemX - initialItemX + itemWidth > 
       (widthOption || (chart.chartWidth - 2 * padding - initialItemX - options.x))) { 
      legend.itemX = initialItemX; 
      legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom; 
      legend.lastLineHeight = 0; // reset for next line (#915, #3976) 
     }

을 그리고 여기 내가이 문 변경하는 방법을 볼 수 있습니다 여기에

// if the item exceeds the width, start a new line 
     if (horizontal && legend.itemX - initialItemX + itemWidth > 
       (widthOption || (chart.chartWidth - 2 * padding - initialItemX - ((options.align === 'right') ? (-options.x) : options.x)))) { 
      legend.itemX = initialItemX; 
      legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom; 
      legend.lastLineHeight = 0; // reset for next line (#915, #3976) 
     }

이 문제와 연결 Github에서 항목을 찾을 수 있습니다 https://github.com/highcharts/highcharts/issues/5443를

그리고 여기 내 해결 방법으로 차트를 볼 수 있습니다 https://jsfiddle.net/paLoxcy3/2/

안부 인사.

출처

2016-06-29 12:49:46

하이 차트 - 범례 배치 (왼쪽 및 오른쪽/x 및 y)

답변

관련 문제