하이 차트 산점도 플롯이 많은 데이터 말기를로드하면 어떻게해야합니까?

Highcharts는 큰 배치 데이터에 대한 성능 문제 및 솔루션을 그래프 로딩합니다.

하이 차트를 사용하여 차트를 그릴 때는 종종 인터페이스 지연 또는 충돌을 일으키는 많은 데이터로드와 같은 문제가 발생합니다. 이 기사는 하이 차트가 실용적인 경우에 큰 배치 산란 플롯을로드하고 해당 솔루션을 제공 할 때 발생하는 문제를 분석합니다.

사례 설명 :

개발자는 vue2 스캐 폴딩 및 HighCharts 버전 "^11.1.0"을 사용하여 많은 양의 데이터가 포함 된 라인 차트와 산점도 플롯을 그립니다. 라인 차트는 정상적으로 30 만 조각의 데이터를로드 할 수 있으며 산란 차트에는 1,000 개의 데이터가로드 될 때 성능 문제가 있습니다. HighCharts는 "HighCharts.js : 12 HighCharts 경고 #12 : www.highcharts.com/errors/12/"경고를 던지고 인터페이스에 다른 오류 메시지가 없습니다. 산점도 데이터는 인터페이스를 통해 반환되는 반면, 라인 플롯 데이터는 WebSocket을 통해 배치로 수신됩니다. 모든 데이터는 수신 후 균일하게 그려집니다. 개발자는 데이터의 배치로드 (SetData 및 Addpoint Methods)를 시도했지만 문제는 지속됩니다.

코드 분석 :

코드에서, 라인 차트의 데이터 처리 로직은 먼저 WebSocket을 통해 모든 데이터를 수신 한 다음 SetData 메소드를 사용하여 한 번에이를 그릴 때 많은 양의 데이터를 처리 할 때 더 효율적입니다. 산점도는 배치 SetData 메소드를 사용하여 매번 데이터의 일부를로드합니다. 문제는 HighCharts가 기본적으로 성능 임계 값을 가지고 있으며 데이터 양 이이 임계 값을 초과하면 성능 경고가 트리거되고 심지어 실패를 렌더링한다는 것입니다. 이 임계 값은 SetData 방법의 효율, 특히 산란 플롯에서 많은 마킹 지점의 도면이 필요합니다.

해결책:

HighCharts는 성능 임계 값 검사를 제어하기 위해 터보로 해산 속성을 제공합니다. Turbothreshold를 0으로 설정하여 성능 임계 값 점검을 해제 할 수있어 더 큰 데이터 세트를로드 할 수 있습니다.

코드 수정 :

HighCharts 차트 구성에서 다음 코드를 추가하십시오.

 PlotOptions : {
  시리즈: {
    Turbothreshold : 0 // 성능 임계 값 확인을 끄려면 0을 설정하거나 데이터 최대로 설정}}
},

Turbothreshold를 0으로 설정함으로써 HighCharts는 큰 배치의 산란 플롯을로드 할 때 발생하는 성능 문제를 해결할 수있어 100,000 이상의 데이터 세트를로드 할 수 있습니다. 데이터 양이 너무 크면 브라우저에서 성능 병목 현상으로 이어질 수 있습니다. 데이터 다운 샘플링 또는 HighCharts의 부스트 모듈을 사용하여 성능을 향상시키는 것과 같은 다른 최적화 방법을 결합하는 것이 좋습니다.

위 내용은 하이 차트 산점도 플롯이 많은 데이터 말기를로드하면 어떻게해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!