Highcharts 툴팁이 그래프 자체와 겹치는 문제가 있습니다. 다음을 찾으십시오. 동일한 내용을 보여주는 이미지 :

LS가 활성화 된 경우 :

하이 차트 툴팁이 그래프와 겹치는 경우

LS가 비활성화 된 경우

LS를 사용할 때 Highcharts가 제대로 작동합니다. 활성화되지 않음

(를 사용하여 차트의 동적 높이를 설정하기 때문에 두 그래프의 배율이 다릅니다. $ (window) .height () LS가 활성 상태 일 때 아직 “Salesforce에 의해 수정되지 않은 .)

코드 :

도우미 :

drawChart : function(component, helper) { if(component.isValid() && component.get("v.isResourcesLoaded") && component.get("v.isDataChanged")) { var stackedColumnChartObj = new Highcharts.Chart({ chart: { renderTo: component.find("stackedColumnChart").getElement() }, title: { text: null }, xAxis: { categories: labelList, title: { text: null }, labels: { enabled: true, format: "`{value}" } }, yAxis: [{ enabled: true, title: { text: null } }], plotOptions: { series: { animation: false, cursor: "pointer", marker: { enabled: false } } }, tooltip: { useHTML: true, borderWidth: 0, borderRadius: 0, backgroundColor:"rgba(255,255,255,0)", shadow: false, formatter: function(){ var s = this.series.name + ": "+ "<br/>Total: " +this.stackTotal; return ("<div class="tooltip">" + s + "</div>"); }, enabled: !component.get("v.isDrillDown") }, credits: { enabled: false }, series: columnDataList }); } 

렌더러 :

({ afterRender: function(component, helper) { this.superAfterRender(); }, rerender: function(component, helper) { this.superRerender(); helper.drawChart(component, helper); } }) 

CSS :-

.THIS .highcharts-tooltip span .tooltip{ z-index:999999999 !important; border: 1px solid; background-color: white; padding:5px; border-radius: 4px; } 

이 문제는 보관함 서비스가 비활성화 된 경우 나타나지 않습니다. 그러나 LS가 비활성화되었을 때 이것이 완벽하게 작동하기를 바랍니다. 누구든지 이에 대한 통찰력을 제공 할 수 있다면 매우 도움이 될 것입니다.

편집 : Pawel에 따라 “의 제안은 툴팁을 HTML로 렌더링했습니다 (위의 Highcharts 초기화 코드를 편집했습니다). 툴팁은 Chrome 기기 시뮬레이터에서 렌더링됩니다. 그러나 iPad 및 iPhone에서는 그래프를 클릭하면 다음 오류가 발생합니다.

TypeError : null은 개체가 아닙니다 ( “e.call”평가).

TypeError : undefined는 개체가 아닙니다 ( “charts [H.hoverChartIndex] .mouseIsDown”평가).

댓글

  • 어리석은 질문 일 수 있지만 CSS를 사용하여 Z- 색인을 10000으로 만들거나 큰 것을 사용하여 맨 앞으로 가져 오면 어떨까요? 리틀 해키 …
  • @Eric을 제안 해 주셔서 감사합니다. 그러나 불행히도 Highcharts는 도구 설명과 그래프를 svg 요소로 렌더링하므로 '이 작동하지 않습니다. 그래서 ' 재정렬 (JS 사용)이 필요하다고 생각합니다. 또한 Locker Service가 비활성화 된 경우에는이 문제가 발생하지 않습니다. 락커 서비스가 활성화되면 '이 문제가 발생합니다.
  • 안녕하세요 @ PawełFus이 문제는 Highcharts의 최신 안정 버전과 Salesforce '의 겨울 ' 17 12.1 패치. 또한 오류 16의 이전 문제는 최신 안정 버전에서 계속 나타납니다. salesforce.stackexchange.com/questions/147917/ …
  • 감사합니다! # 16 문제와 관련하여-구성 요소는 항상 Highcharts를로드합니다. Highcharts는 한 번만로드되어야합니다.
  • 안녕하세요 @ PawełFus 간단한 업데이트입니다. Windows 데스크톱의 Microsoft Edge 브라우저에 Highcharts 오류 # 16이 있습니다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다