다른 모듈을 사용하여 동일한 페이지에 두 개의 차트를 배치하는 방법은 무엇입니까?

로버트

한 페이지에 두 개의 차트를 넣었습니다. 첫 번째 차트 (분산 형)는 Highcharts를 사용하여 생성되었고 두 번째 차트 (선)는 Highstock을 사용하여 생성되었습니다. Highcharts가 Highstock에 포함되어 있으므로 이것을 사용합니다.

<script src="resources/chart/Highstock/js/highstock.js"></script>   
<script src="resources/chart/Highstock/js/modules/exporting.js"></script>

내 페이지의 일부는 다음과 같습니다.

<script src="resources/chart/Highstock/js/highstock.js"></script>
<script src="resources/chart/Highstock/js/modules/boost.js"></script>   
<script src="resources/chart/Highstock/js/modules/exporting.js"></script>

<script type="text/javascript"> create the chart using the highcharts and put it in a containerForHighchart </script>
<script type="text/javascript"> create the chart using the highstock and put it in a containerForHighstock </script>

<div id="containerForHighchart" style="height: 700px; width: 100%; margin: 0 auto;"></div>
<div id="containerForHighstock" style="height: 700px; width: 100%; margin: 0 auto;"></div>

지금 : 다음과 같은 것을 달성하고 싶습니다.

  • 첫 번째 차트 (하이 차트)는 boost.js모듈을 사용해야합니다 .
  • 두 번째 차트 (highstock)는 boost.js모듈을 사용하지 않아야 합니다.

왜? 성능 및 일부 버그로 인해. 두 차트 모두 많은 데이터를 표시해야합니다.

boost.js페이지에 차트를 하나만 사용 하고 넣을 :

  • highstock 차트는 매우 느리게로드됩니다. 대부분의 경우 브라우저는 페이지가 응답하지 않는다고 알려주고 마지막에는 차트가없는 네비게이터 만 볼 수 있습니다.
  • 하이 차트 차트가 빠르게로드됩니다.

사용하지 않고 boost.js페이지에 하나의 차트 만 넣을 :

  • highstock 차트는 빠르게로드됩니다.
  • highchart 차트가 너무 오래로드되고 매우 느립니다.

두 차트 중 하나만 boost.js동일한 페이지 에서 모듈을 사용하는 방법이 있습니까?

마이크 자 바렐로

시도 할 수있는 한 가지 해결책은 차트를 별도의 웹 페이지 <iframe>에 배치하고 태그를 사용 하여 둘 다 단일 HTML 문서에 배치하는 것입니다. 이렇게하면 어떤 차트에 어떤 라이브러리가 있는지 제어 할 수 있으며 서로 충돌하지 않아야합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

CSS가 다른 동일한 기능을 가진 동일한 페이지에서 두 개의 토글 버튼을 사용하는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 사용자 페이지에서 동일한 사용자 페이지로 이동하는 방법은 무엇입니까?

분류에서Dev

동일한 활동에서 두 개의 다른 버튼을 클릭하여 두 개의 다른 활동으로 이동하는 방법은 무엇입니까?

분류에서Dev

꼭두각시-두 개의 다른 클래스를 사용하여 동일한 구성 파일을 제공하는 방법은 무엇입니까?

분류에서Dev

vi 편집기를 사용하여 두 개의 다른 파일을 여는 방법은 무엇입니까?

분류에서Dev

vi 편집기를 사용하여 두 개의 다른 파일을 여는 방법은 무엇입니까?

분류에서Dev

서로 다른 모듈을 가진 두 개의 서로 다른 컨트롤러가있는 서비스를 사용하여 서로 다른 모듈간에 데이터를 전달하는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 쿼리를 사용하여 자동 완성을 만드는 방법은 무엇입니까?

분류에서Dev

PHP를 사용하여 두 개의 다른 문자열에서 찾은 동일한 단어를 계산하는 방법은 무엇입니까?

분류에서Dev

동일한 div에 서로 다른 크기가 정렬 된 두 개의 수평선을 하나씩 배치하는 방법은 무엇입니까?

분류에서Dev

Jest의 동일한 테스트 파일에서 다른 테스트에서 다른 방식으로 모듈을 모의하는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 객체 키를 비교하고 키가 Javascript에서 동일한 경우 값을 업데이트하는 방법은 무엇입니까?

분류에서Dev

두 가지 다른 유형의 출력을 캡처하는 동일한 일치의 하위 일치로 RegEx를 만드는 방법은 무엇입니까?

분류에서Dev

citrus와 동일한 포트에서 다른 URL로 두 개의 모의 웹 서비스를 실행하는 방법은 무엇입니까?

분류에서Dev

동일한 코드베이스를 사용하지만 프로필이 다른 동일한 컨테이너에서 실행되는 두 개의 스프링 부트 애플리케이션을 원격 디버그하는 방법은 무엇입니까?

분류에서Dev

Python Gtk : 동일한 노트북의 다른 페이지에서 동일한 위젯을 사용하는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 파일에서 일치하는 두 줄을 인쇄하는 방법은 무엇입니까?

분류에서Dev

HStack을 두 개의 동일한 부분으로 나누고 각 부분의 중간에 이미지를 배치하는 방법은 무엇입니까?

분류에서Dev

DigitalOcean-동일한 물방울에 두 개의 WordPress 설치를 배포하는 방법은 무엇입니까?

분류에서Dev

동일한 활동에 대한 두 가지 다른 의도를 구별하는 방법은 무엇입니까?

분류에서Dev

html / jquery를 사용하여 HTML 테이블에서 두 개의 겹치는 색상에 다른 색상을 할당하는 방법은 무엇입니까?

분류에서Dev

동일한 활동에 대해 두 개의 다른 인 텐트 필터를 사용하는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 jQuery 이벤트에서 동일한 변수를 사용하는 방법은 무엇입니까?

분류에서Dev

Plotly : plotly.graph_objects를 사용하여 동일한 플롯에 두 개의 3D 그래프를 배치하는 방법은 무엇입니까?

분류에서Dev

다른 결과로 두 개의 동일한 mongo 컬렉션을 모의하는 방법은 무엇입니까?

분류에서Dev

두 개의 서로 다른 바인딩을 사용하여 사용자 지정 ListView에서 모든 정보를 얻는 방법은 무엇입니까?

분류에서Dev

Orchard의 한 페이지에 두 개의 모양 결과를 표시하는 방법은 무엇입니까?

분류에서Dev

라 라벨 몰틴 카트에 크기가 다른 동일한 ID의 제품을 두 개 이상 추가하는 방법은 무엇입니까?

분류에서Dev

한 곳에 두 개의 Seeksbar를 배치하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    CSS가 다른 동일한 기능을 가진 동일한 페이지에서 두 개의 토글 버튼을 사용하는 방법은 무엇입니까?

  2. 2

    두 개의 다른 사용자 페이지에서 동일한 사용자 페이지로 이동하는 방법은 무엇입니까?

  3. 3

    동일한 활동에서 두 개의 다른 버튼을 클릭하여 두 개의 다른 활동으로 이동하는 방법은 무엇입니까?

  4. 4

    꼭두각시-두 개의 다른 클래스를 사용하여 동일한 구성 파일을 제공하는 방법은 무엇입니까?

  5. 5

    vi 편집기를 사용하여 두 개의 다른 파일을 여는 방법은 무엇입니까?

  6. 6

    vi 편집기를 사용하여 두 개의 다른 파일을 여는 방법은 무엇입니까?

  7. 7

    서로 다른 모듈을 가진 두 개의 서로 다른 컨트롤러가있는 서비스를 사용하여 서로 다른 모듈간에 데이터를 전달하는 방법은 무엇입니까?

  8. 8

    두 개의 다른 쿼리를 사용하여 자동 완성을 만드는 방법은 무엇입니까?

  9. 9

    PHP를 사용하여 두 개의 다른 문자열에서 찾은 동일한 단어를 계산하는 방법은 무엇입니까?

  10. 10

    동일한 div에 서로 다른 크기가 정렬 된 두 개의 수평선을 하나씩 배치하는 방법은 무엇입니까?

  11. 11

    Jest의 동일한 테스트 파일에서 다른 테스트에서 다른 방식으로 모듈을 모의하는 방법은 무엇입니까?

  12. 12

    두 개의 다른 객체 키를 비교하고 키가 Javascript에서 동일한 경우 값을 업데이트하는 방법은 무엇입니까?

  13. 13

    두 가지 다른 유형의 출력을 캡처하는 동일한 일치의 하위 일치로 RegEx를 만드는 방법은 무엇입니까?

  14. 14

    citrus와 동일한 포트에서 다른 URL로 두 개의 모의 웹 서비스를 실행하는 방법은 무엇입니까?

  15. 15

    동일한 코드베이스를 사용하지만 프로필이 다른 동일한 컨테이너에서 실행되는 두 개의 스프링 부트 애플리케이션을 원격 디버그하는 방법은 무엇입니까?

  16. 16

    Python Gtk : 동일한 노트북의 다른 페이지에서 동일한 위젯을 사용하는 방법은 무엇입니까?

  17. 17

    두 개의 다른 파일에서 일치하는 두 줄을 인쇄하는 방법은 무엇입니까?

  18. 18

    HStack을 두 개의 동일한 부분으로 나누고 각 부분의 중간에 이미지를 배치하는 방법은 무엇입니까?

  19. 19

    DigitalOcean-동일한 물방울에 두 개의 WordPress 설치를 배포하는 방법은 무엇입니까?

  20. 20

    동일한 활동에 대한 두 가지 다른 의도를 구별하는 방법은 무엇입니까?

  21. 21

    html / jquery를 사용하여 HTML 테이블에서 두 개의 겹치는 색상에 다른 색상을 할당하는 방법은 무엇입니까?

  22. 22

    동일한 활동에 대해 두 개의 다른 인 텐트 필터를 사용하는 방법은 무엇입니까?

  23. 23

    두 개의 다른 jQuery 이벤트에서 동일한 변수를 사용하는 방법은 무엇입니까?

  24. 24

    Plotly : plotly.graph_objects를 사용하여 동일한 플롯에 두 개의 3D 그래프를 배치하는 방법은 무엇입니까?

  25. 25

    다른 결과로 두 개의 동일한 mongo 컬렉션을 모의하는 방법은 무엇입니까?

  26. 26

    두 개의 서로 다른 바인딩을 사용하여 사용자 지정 ListView에서 모든 정보를 얻는 방법은 무엇입니까?

  27. 27

    Orchard의 한 페이지에 두 개의 모양 결과를 표시하는 방법은 무엇입니까?

  28. 28

    라 라벨 몰틴 카트에 크기가 다른 동일한 ID의 제품을 두 개 이상 추가하는 방법은 무엇입니까?

  29. 29

    한 곳에 두 개의 Seeksbar를 배치하는 방법은 무엇입니까?

뜨겁다태그

보관