Highcharts: 툴팁이 다른 DOM 요소에 의해 오버플로되었습니다.

_해결 방법_
사용자 정의 html <div> 을 사용하고 CSS 스타일을 적용합니다.

데모:

• http://jsfiddle.net/7wVDV/147/

해결 방법

원래 도구 설명의 작은 포인터를 유지할 수 있는 대체 접근 방식도 있습니다. 툴팁을 별도의 svg 상자에 넣습니다. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -상자/.

@sebastianbochan 감사합니다. 이것은 좋은 접근 방식인 것 같습니다. 하지만 내가 말했듯이 overflow:scroll이 있는 div에 내 차트가 래핑되어 있기 때문에 내 문제를 해결하지 못합니다.
문제에 대해 이 바이올린을 확인하십시오. http://jsfiddle.net/7wVDV/201/

다른 해결 방법은 다음과 같습니다. http://jsfiddle.net/highcharts/7wVDV/202/

해결 방법에 대해 @TorsteinHonsi 에게 감사드립니다. 시도해 보겠습니다.
'appendToBody' 옵션이 향후 릴리스에서 구현하기를 고대하고 있습니까?

@TorsteinHonsi 해결 방법에 몇 가지 문제가 있습니다.

1. 화면 가장자리에 툴팁을 생성하면 본문에 스크롤바가 나타납니다. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (데모 창 너비를 2 차트 너비로 설정하고 먼저 마우스를 가져갑니다. 오른쪽에서 점)

2. IE11에서 setSize(JS 줄 86)는 더 작은 보기 상자를 생성하지 않습니다. 예를 들어 이 데모는 Chrome의 컷 툴팁과 IE11의 일반 툴팁을 보여줍니다. http://jsfiddle.net/Lguddypf/

3. 표에 표시할 때 차트를 보기 위해 스크롤해야 하는 경우 툴팁 위치가 잘못되었습니다. http://jsfiddle.net/Lguddypf/1/ (사이트를 차트로 스크롤하고 포인트 위로 마우스를 가져가면 툴팁 위치가 왼쪽으로 이동했습니다.

iPad 또는 Chrome에서 http://jsfiddle.net/1jp9e4rw/3/show/ 를 여십시오. 데이터 포인트 아래에 나타나는 도구 설명의 앵커는 표시되지 않습니다.

이것은 도구 설명 외부 상자 연구의 문제입니다. 표준 구현에서는 툴팁이 좋습니다.

위 문제에 대한 해결 방법: http://jsfiddle.net/1jp9e4rw/9/

@pawelfus 우리는 실제로 코드에서 유사한 해결 방법(H.wrap())을 시도했지만 해결 방법은 문제를 완벽하게 해결하지 못하는 것으로 나타났습니다. 예를 들어 우리의 경우 성능 및 접근성 문제가 있을 수 있습니다. , Safari 브라우저에서도 툴팁 위치가 Chrome 브라우저와 동일하게 계산되지 않습니다. 따라서 소비자 측에서 랩을 사용하여 버그를 해결하려고 시도하는 대신 하이차트가 네이티브 코드에서 이 문제를 수정하는 것이 매우 좋습니다.

이 버그가 1년 이상 제출된 것으로 나타났습니다. 이 버그를 수정할 일정이나 계획이 있습니까?

이 버그에 대한 기본 수정도 원합니다.
jQuery 스크립트를 복사하는 것이 제대로 작동하지 않는 것 같으며 일부 인스턴스는 상황을 더욱 악화시킵니다.

플러그인 기반 솔루션에 의존하는 대신 기본 수정도 +1입니다. 우리는 우리 애플리케이션에서도 이 문제를 실행하고 있습니다.

다음은 Paweł이 제안한 해결 방법이지만 jQuery 없이(그리고 창 및 문서 크기를 가져오기 위한 동일한 계산이 사용됨) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

별로 좋은 해결 방법은 아닙니다 :(

안녕하세요 @MiroLiska
스크롤바 스타일과 JSFiddle 로고 오류에서 추측 - IE11입니다.
해당 브라우저 에서 Paweł의 데모 는 동일하게 보입니다. jQuery 종속성만 제거했으며 코드/로직에서 개선된 것은 없습니다.
BTW: 스크롤로 인해 발생합니다.

이건 어때? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
스크롤 막대 점프를 피하기 위해 애니메이션이 비활성화되었지만 도구 설명의 애니메이션을 래핑하여 사용 가능한 공간에서만 애니메이션되거나 스크롤 막대 작업을 트리거하지 않도록 할 수 있습니다.

@KacperMadej 정말 감사합니다! 다른 DOM 요소와 겹치기 위해 툴팁이 필요한 앱에서 유사한 문제가 발생했습니다. 새로운 솔루션이 훨씬 더 좋습니다. 그러나 한 가지 작은 비판은 여러 시리즈가 있는 꺾은선형 차트가 있는 경우 도구 설명 위로 마우스를 가져가서 다른 시리즈로 이동하면 아무 일도 일어나지 않고 경험이 좋지 않은 약간의 지연이 있다는 것입니다.

여기서 문제는 mouseOver 이벤트가 툴팁 위에 있으면 시작되지 않는다는 것입니다. 하지만 그건 가정일 뿐이야

또한 또 다른 의견은 - useHTML 로 형식을 지정하고 스타일을 지정해야 한다는 것입니다. 제가 알기로는 이 플러그인을 사용하면 useHTML 를 사용하고 사용자 지정 서식을 적용할 수 없습니다. 그렇죠?

안녕하세요 @jackyliang

오래 전에 mouseOver 및 hovering tooltip(Highcharts v4.0 주변)에 버그가 있었습니다. 이것은 가장 가까운 지점을 검색하기 위해 kd-tree를 사용하기 때문에 문제가 되지 않습니다. 퇴보가 아닐까? jsFiddle에서 문제를 재현하고 공유할 수 있습니까? 감사 해요!

useHTML - 예, 제한 사항입니다.

여기서 정말 필요한 것은 차트와 전혀 관련이 없는 독립 실행형 툴팁이라고 생각합니다. 예를 들어, 간단한 <div> 를 사용할 수 있습니다. 이 기능은 마우스오버 시 업데이트되고 마우스아웃 시 숨겨집니다. 데모: http://jsfiddle.net/BlackLabel/xctq42n8/1/ - 이제 툴팁 안에 무엇이든 쓸 수 있습니다. 개선이 필요한 유일한 것은 위치 지정입니다(데모는 차트와 관련된 포인트의 위치만 사용하고 누락된 것은 문서의 차트 위치입니다).

@pawelfus 안녕하세요 Pawel입니다. 우리는 지금 6.1에 있습니다(방금 확인됨). useHTML 의 부족은 다른 DOM 요소를 오버플로하도록 허용하더라도 일종의 큰 문제입니다. 우리 팀은 우리의 오래된 d3 차트를 Highcharts로 마이그레이션하는 작업을 약 95% 완료했지만(즐거운 경험이었음을 염두에 두십시오 :D), 전통적으로 각 차트가 자체 요소에 있기 때문에 툴팁이 다른 dom 요소를 오버플로합니다. 따라서 현재 Highcharts를 사용하면 다음과 같이 보입니다.

알 수 있듯이 useHTML 를 사용하여 이전 툴팁과 100% 일치하는 사용자 지정 스타일이 있습니다.

많은 사용자 정의 코드를 작성하지 않고도 이 오버플로 동작을 지원하는 Highcharts의 기본 솔루션이 있을 가능성이 있습니까?

안녕하세요 @jackyliang 입니다 .
현재로서는 해결 방법으로만 솔루션을 사용할 수 있습니다.

@pawelfus 안녕하세요 Pawel, 여기에서 기본 솔루션을 얻을 가능성이 얼마나 되는지 알고 싶습니다.
우리는 그러한 문제에 대한 해결 방법을 구현하고 싶지 않았기 때문에 Highcharts를 선택했으며 많은 사람들이 이 문제에 직면하는 것 같습니다.
여기에 언급된 모든 해결 방법에는 몇 가지 단점이 있는 것 같으므로 이에 대한 깨끗한 기본 솔루션을 얻는 것이 올바른 단계인 것 같습니다.

@sebastianbochan 그래서 우리가 기본 솔루션을 얻을 가능성이 얼마나 되는지 알고 싶습니다. 나는 그런 훌륭한 도서관에 대해 그렇게 큰 단점이 있다는 것을 용납할 수 없다고 생각합니다.

@jackyliang @robinv 좋은 말씀 감사합니다! :)

@jackyliang @robinv - 문제의 인기를 감안할 때 이 문제를 해결해야 합니다. 지금은 ETA를 설정할 수 없습니다.

내부 참고 사항:
해결 방법은 Tooltip 클래스를 Chart 클래스와 분리하고 독립적인 요소(본문?)에서 렌더링하는 것입니다. 여기서 문제는 툴팁과 차트/포인터 클래스를 분리하는 것일 수 있습니다(고급 재고 데모에서 시도한 것처럼 까다롭습니다) + 이미지로 툴팁 내보내기를 중단할 수 있습니다( tooltip.refresh() ). 그래도 v7에서 이것을 구현하는 것이 좋을 것입니다. 재고 도구 버튼/메뉴 항목에 대해 도구 설명 인스턴스 시작을 사용하고 원하는 대로 사용할 수 있습니다. @TorsteinHonsi

나는 @robinv 가 말한 것에 매우 찬성합니다. 이것이 또한 우리가 Highchart로 전환한 주요 이유 중 하나이기 때문입니다. 우리는 너무 많은 사용자 정의 코드를 작성하지 않기를 원했습니다. 우리의 오래된 d3 차트에는 많은 사용자 정의 확장/개선 사항이 있었고 잠시 후 변경하는 것은 엉망이고 악몽이 되었습니다. 나는 우리가 HC를 우리의 취향에 맞게 사용자 정의하고 싶지 않다고 말하는 것이 아닙니다(사용자 정의 != 확장), 주로 확장에 대해 이야기합니다. 기본 HC가 아직 지원하지 않는 작업을 수행합니다.

우리의 계획은 2-3주 이내에 고객에게 HC 통합을 롤백하는 것이며 툴팁이 다른 DOM 요소 위에 나타나지 않으면 고객이 불평할 것이라는 것을 알고 있습니다. 우리가 얻을 수 있는 최소값이 이것이 언제 완료될 수 있는지에 대한 ETA라면 지금으로서는 만족할 것입니다. 그 이후로 우리는 사용자 정의 솔루션을 작성하려고 시도할지(현재) Highcharts의 기본 솔루션을 기다릴지 설정할 수 있습니다.

@sebastianbochan 위치 지정 측면이 약간 불안정하기 때문에 해결 방법이 실제로 솔루션이 아니라는 점에 주목하고 싶었습니다.

DOM 겹침이 있는 현재 툴팁의 동작(위치 지정/호버링의 불안정함 없이 사용자 정의 HTML을 사용할 수 있음)을 에뮬레이트하는 플러그인 또는 네이티브 구현에 대한 ETA를 보게 되어 매우 기쁩니다.

@pawelfus 와 @jackyliang에게 감사드립니다.

Pawel, Jacky가 언급했듯이 우리는 앞으로 2-3주 안에 고객에게 Highcharts를 출시할 예정이며 이것이 우리 구현의 주요 방해 요소 중 하나입니다. 이것이 기능이 아니라 버그라는 점을 감안할 때 이것이 향후 2-3주 안에 해결될 계획입니까?

안녕하세요 @pawelfus 이에 대한 추가 정보가 있는지 확인하기 위해 후속 조치를 취하고 싶었습니다. 언제쯤 알 수 있을까요? 이것은 현재 계획 프로세스에 중요하므로 더 많은 정보를 기다리고 있습니다. 감사 해요!

@wynnandrewj 안녕하세요. ETA가 결정되면 이 스레드를 업데이트하겠습니다. 앞으로 2-3주 안에 v6.1.1을 출시할 계획이 있지만 이 문제에 대한 수정 사항이 포함될 것이라고 장담할 수 없습니다.

@pawelfus님 , 안녕하세요, 이 문제와 관련하여 귀하와 귀하의 팀에 후속 조치를 취하고 싶었습니다. 우리는 고객을 위한 Highcharts 출시에 매우 가깝고(첫 번째 고객 배치의 경우 최대 2-3주를 생각하십시오) 이것은 확실히 방해 요소입니다. 정확한 날짜를 말씀드리기 어려운 점 충분히 이해하고 있으니 묻지 않겠습니다. 그러나 이 문제가 해결될지 여부와 대략적인 일정에 대한 정보는 감사하겠습니다.

기본적으로 내부적으로 이해하고 고객과 소통할 수 있는 모든 것이 훌륭할 것입니다.

감사 해요!

@jackyliang 을 기다려 주셔서 감사합니다. 오늘 이 코드에 대해 작업하고 나머지 문제에 대한 개요를 얻으려고 합니다.

이제 http://jsfiddle.net/highcharts/fqx10th9/에서 테스트할 수 있는 후보가 있습니다.

위의 문제, 즉 useHTML , 커서를 위로 이동할 때 깜박임 및 좁은 페이지에 나타나는 스크롤바가 수정되었다고 생각합니다.

이 후보자를 테스트하십시오. 성공하면 이번 주 릴리스인 Highcharts v6.1.1의 일부로 만들 것입니다.

@TorsteinHonsi 정말 감사합니다! 이것을 가지고 놀기를 기다릴 수 없습니다.

@TorsteinHonsi
나는 그것을 테스트했고 모든 시나리오에서 작동합니다.

이것은 우리에게 매우 완벽했고 다시 추가하는 데 30분 정도 걸렸습니다. 이렇게 빠르고 완벽하게 구현해주셔서 정말 감사합니다!

@TorsteinHonsi https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js 가 존재하지 않기 때문에 바이올린이 더 이상 작동하지 않습니다. 지점이 삭제된 것 같아요

@BernardoFBBraga

성공하면 이번 주 릴리스인 Highcharts v6.1.1의 일부로 만들 것입니다.

그래서 우리는 그렇게 했습니다. Highcharts v6.1.1+를 사용하여 기능을 사용할 수 있습니다.
API 참조: https://api.highcharts.com/highstock/tooltip.outside
데모: http://jsfiddle.net/BlackLabel/c70h1akL/1/