Plotly.js, 1 부 : 시작을 사용하여 대화식 차트를 만듭니다

the the the the the the the that that that that.js라는 제목의 시리즈에서는 차트를 사용하여 반응 형 캔버스 기반 차트를 쉽게 만들어내는 방법을 배웠습니다. 이 시리즈는 라이브러리에서 제공하는 7 가지 기본 차트 유형을 다루었습니다. 그러나 차트를 대화식으로 만들기 위해 추가 기능을 갖춘보다 복잡한 차트를 만들어야 할 수도 있습니다.

다양한 응답 형, 대화식 및 기능이 풍부한 차트를 만들기 위해 가장 좋은 무료 사용 라이브러리 중 하나는 Plotly.js입니다. 이 시리즈에서는 라인 차트, 막대 차트, 버블 차트 및 도트 플롯 차트를 포함하여 Plotly.js를 사용하여 다양한 종류의 차트를 만드는 방법을 배웁니다.

왜 Plotly.js를 사용 하는가?

plotly.js는 라이브러리에 대한 많은 기능을 제공하는 많은 기능을 제공합니다. D3.JS 및 Stack.gl 위에 내장 된 고급 선언 라이브러리입니다. 다음은 Plotly 최고의 JavaScript 차트 라이브러리 중 하나를 만드는 기능 목록입니다.

Plotly.js를 사용하여 쉽게 대화식 차트를 만들 수 있습니다. 라이브러리를 사용하여 작성하는 모든 차트에는 축소, 축소, 패닝, 자동 스케일링 등과 같은 기능이 장착되어 있습니다. 이러한 기능은 다수의 플롯 된 포인트가있는 차트를 연구 할 때 매우 유용합니다. 이러한 모든 이벤트는 API에 노출되므로 이러한 이벤트 중 하나가 트리거 될 때 자신의 작업을 수행하기 위해 사용자 정의 코드를 작성할 수 있습니다.

많은 포인트를 플로팅 할 때 High Points를 플롯 할 때 많은 양의 데이터를 차트해야 할 때마다 훌륭한 선택입니다. 대부분의 차트는 SVG를 사용하여 생성되므로 브라우저에서 적절한 양의 호환성과 모든 차트의 고품질 이미지를 내보낼 수 있습니다. 그러나 DOM에 많은 수의 SVG 요소를 그리면 성능에 부정적인 영향을 줄 수 있습니다. 라이브러리는 stack.gl을 사용하여 고성능 2D 및 3D 차트를 생성합니다.

생성 한 모든 3D 차트는 GPU가 제공하는 모든 힘을 최대한 활용하여
모든 Plotly.js 차트가 완전히 사용자 정의 할 수 있습니다. 색상 및 레이블에서 그리드 라인 및 범례에 이르기까지 모든 JSON 속성 세트를 사용하여 사용자 정의 할 수 있습니다. 시리즈의 다음 세 부분에서 다양한 차트 유형을 사용자 정의하는 방법을 배웁니다.
• Plotly 설치
Plotly.js를 사용하기 전에 먼저 설치해야합니다. 라이브러리를 설치하는 방법에는 여러 가지가 있습니다.
• > 첫 번째 옵션은 다음 명령을 실행하여 를 사용하여 설치를 수행하는 것입니다.이 옵션은 아마도 가장 우아하고 유연 할 것입니다. 그러나 Bundler를 설정 해야하는데, 이는 브라우저가 처리 할 수있는 것으로 자동으로 사용하는 NPM 패키지를 자동으로 변환해야합니다. 또한 실제로 패키지를 사용하려면 ESM을 사용하고 싶을 것입니다. ESM에 대한 자세한 내용은 여기를 참조하십시오.
프로토 타이핑을위한 빠른 솔루션을 원한다면 Plotly.js CDN을 사용하고 라이브러리에 직접 연결할 수도 있습니다.이 튜토리얼을 작성할 때

npm install plotly.js<br>

최신 버전의 라이브러리는 2.14.0입니다. 라이브러리를 최소화하고 압축 한 후 파일 크기는 1.1MB입니다. 비화 및 비 압축 버전의 크기는 3.5MB입니다. 보시다시피,이 라이브러리가 제공하는 긴 기능 목록은 가격으로 제공됩니다.

버전 1.15에서 시작하여 다른 부분 번들 중에서 선택할 수 있으며, 각각의 특정 차트 유형을 만들 수 있습니다. 기본, 직교, GEO, GL3D, GL2D, Mapbox, Finance 및 Strict의 7 가지 다발이 있습니다. 다음 줄을 사용 하여이 번들의 CDN 링크를 얻을 수 있습니다.

또는 NPM을 사용하는 경우 해당 번들에 대한 패키지를 설치할 수 있습니다.

단일 번들에서 차트를 그려야하는 경우이 방법을 사용하여 파일 크기를 크게 줄일 수 있습니다. 각각에 대한 추가 정보는 다음과 같습니다.

<script type="text/javascript" src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script><br>

https://cdn.plot.ly/plotly-bundleName-2.14.0.min.js<br><br>// Therefore the basic bundle becomes:<br>https://cdn.plot.ly/plotly-basic-2.14.0.min.js<br><br>// and the cartesian bundle becomes:<br>https://cdn.plot.ly/plotly-cartesian-2.14.0.min.js<br>

기본

:이 번들에는 히스토그램 2d

, pie

, Scatterternary
• 트레이스 모듈이 포함되어 있습니다. 이 번들의 압축 및 최소화 버전의 크기는 238.2 kb입니다. geo :이 번들을 사용하면 JavaScript에서 다양한 유형의 맵 관련 차트를 만들 수 있습니다. 이 번들의 압축 및 미니스트 버전의 크기는 224.1 kb입니다. gl3d :이 번들을 사용하면 scatter , <code> scatter3d , <code> 표면 및 <code> mesh3d
Gl2d
• :이 번들은 scatter , <code> scattergl , <code> pointcloud , <code> heatmapgl <code>scatter scatter3d mapbox surface :이 번들에는 scatter <code>mesh3d 및 scattermapbox
추적 모듈이 포함되어 있습니다. 이 경우 파일 크기는 328.6 kb입니다.
• 금융 : 금융 번들을 사용하여 시계열, 촛대 및 기타 차트 유형을 작성하여 재무 데이터를 플롯 할 수 있습니다. 이 모듈은 scatter , <code> bar scatter, histogram <code>scattergl, pie pointcloud, ahlc <code>heatmapgl 및 candlestick <code>contourgl 트레이스 모듈로 구성됩니다. strict parcoords : 정상적인 번들이 포함되어 있습니다. 이 번들은 표준 번들보다 10% 더 크기 때문에 실제로 필요하지 않으면 사용하지 마십시오.
• 플롯을 사용하여 웹 페이지에서 적절한 번들을 작성하고로드하려는 차트를 결정한 후에는 Plotly.js를 사용하여 자체 차트를 만들 수 있습니다. 가장 먼저해야 할 일은 그래프를 그려야하는 빈 div <strong> 요소를 만드는 것입니다.<ready> 차트에서 플롯 할 데이터를 준비하십시오. 이 예에서는 차트를 만들기 위해 임의의 숫자를 사용하고 있습니다. 마지막으로, <p> 함수를 호출하고 컨테이너 와 같은 모든 정보, 데이터 및 레이아웃 옵션을 제공해야합니다. 다음은 매우 기본적인 라인 차트를 만들기위한 코드입니다. <code>plot() Plotly.js의 모든 차트는 JSON 객체를 사용하여 선언적으로 생성됩니다. 색상 및 데이터와 같은 차트의 모든 속성에는 차트의 모양과 동작을 완전히 사용자 정의하는 데 사용할 수있는 해당 JSON 속성이 있습니다. div 속성은 두 가지 범주로 크게 나눌 수 있습니다. 첫 번째는 트레이스
  라고 불리며, 이는 그래프에 표시 할 단일 시리즈의 데이터에 대한 정보를 제공하는 데 사용되는 객체입니다. 두 번째 범주는 레이아웃

  npm install plotly.js<br>

  이며, 제목이나 주석과 같은 차트의 다른 모든 측면을 제어하는 ​​다른 속성을 제공합니다. 다른 트레이스는 차트 유형별로 더 분류되며, 차트를 그리는 데 사용할 수있는 속성은 유형

  속성의 값에 따라 달라집니다.

  위의 예에서는 차트에 표시하려는 추적 유형과 데이터를 저장하는 객체를 만들었습니다. 다음 Codepen 데모는 위 코드의 최종 결과를 보여줍니다. 데모에서 볼 수 있듯이 그래프를 축소, 축소 또는 자동 스케일 할 수 있습니다. 차트를 이미지로 다운로드 할 수도 있습니다. 차트 자체는 날카로운 선으로 매우 전문적으로 보입니다. 레이아웃 속성은이 시리즈의 나머지 튜토리얼에서 차트를 사용자 정의하기위한 레이아웃 속성으로, 라인 및 막대 차트와 같은 특정 차트 유형과 관련된 다양한 속성에 대해 학습하는 데 중점을 둘 것입니다. 이를 수행하기 전에 글꼴, 제목, x 축, y 축 등과 같은 모든 차트 유형에 공통적 인 측면을 제어하는 ​​다양한 레이아웃 속성에 대한 기본 지식이 있어야합니다. 축 및 제목과 같은 추적 및 기타 레이아웃 구성 요소를 생성하는 동안 사용해야하는 글로벌 글꼴을 지정할 수 있습니다. 옵션은 객체를 사용하여 지정되며 이러한 값은 기본적으로 차트의 모든 구성 요소에서 사용됩니다. , 및 키는 키 안에 중첩되어 있습니다. 그것들을 사용하여 글로벌 글꼴 색상, 글로벌 글꼴 크기 및 글로벌 글꼴 주식을 각각 설정할 수 있습니다. 각 차트에는

  속성이 있으며 현재 차트의 제목을 설정하는 데 사용할 수 있습니다. 그것은 사용자에게 차트에서 플롯하는 내용에 대한 정보를 제공합니다. 제목의 글꼴 속성은 title 속성을 ​​사용하여 지정할 수 있습니다. 글로벌 속성과 마찬가지로 속성 내부에 중첩 된 , titlefont 및 키는 제목의 글꼴 관련 특성을 제어하는 ​​데 사용될 수 있습니다. font

  키에 중첩 된 다른 속성을 사용하여 차트 주변의 간격을 제어 할 수 있습니다. 모든 값은 픽셀로 지정됩니다. color 왼쪽 여백은 속성, 속성을 ​​사용하여 오른쪽 여백, 속성을 ​​사용하여 상단 여백, 속성을 ​​사용하는 바닥 여백을 사용하여 지정됩니다. 플로팅 영역과 축 선은 기본적으로 서로 매우 가깝습니다. 키 안에 중첩 된 속성을 ​​사용하여 플로팅 영역 주위에 공간을 추가 할 수 있습니다. 패딩은 픽셀로 지정되어 있으며 기본값은 0입니다. size 웹 사이트의 테마와 일치하는 플로팅 영역뿐만 아니라 전체 차트의 배경에 대해 고유 한 색상을 선택할 수 있습니다. 이 두 가지 색상은 기본적으로 흰색으로 설정되지만 각각 및 키를 사용하여 각각 다른 값을 지정할 수 있습니다. family 차트의 모든 축에 대해 제목과 다른 글꼴 속성을 지정할 수도 있습니다. 글꼴 특성은 각 축의 축 키 안에 중첩됩니다. 또한 축의 기본 색상과 제목에 사용되는 글꼴의 색상을 독립적으로 제어 할 수 있습니다. titlefont 때로는 차트에 표시되는 포인트가 0으로 떨어지지 않습니다. 그러한 경우, 축에서 플롯에 의해 생성 된 진드기도 0으로 확장되지 않습니다. 그러나 진드기가 항상 0에서 시작되기를 원한다면, 그 점이 표시되는 지점의 범위에 관계없이 속성을 ​​사용하여 값을

  . Plotly.js 라이브러리의 다양한 기능에 대해 배웠습니다. 또한 귀하의 요구에 따라 차트의 모양을 사용자 정의하기 위해 다양한 레이아웃 속성과 함께 라이브러리의 설치 및 사용을 다루었습니다.이 게시물은 Jacob Jackson의 기여로 업데이트되었습니다. Jacob은 웹 개발자, 기술 작가, 프리랜서 및 오픈 소스 기고자입니다.

위 내용은 Plotly.js, 1 부 : 시작을 사용하여 대화식 차트를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!