다양한 응답 형, 대화식 및 기능이 풍부한 차트를 만들기 위해 가장 좋은 무료 사용 라이브러리 중 하나는 Plotly.js입니다. 이 시리즈에서는 라인 차트, 막대 차트, 버블 차트 및 도트 플롯 차트를 포함하여 Plotly.js를 사용하여 다양한 종류의 차트를 만드는 방법을 배웁니다.
왜 Plotly.js를 사용 하는가?plotly.js는 라이브러리에 대한 많은 기능을 제공하는 많은 기능을 제공합니다. D3.JS 및 Stack.gl 위에 내장 된 고급 선언 라이브러리입니다. 다음은 Plotly 최고의 JavaScript 차트 라이브러리 중 하나를 만드는 기능 목록입니다.
많은 포인트를 플로팅 할 때 High Points를 플롯 할 때 많은 양의 데이터를 차트해야 할 때마다 훌륭한 선택입니다. 대부분의 차트는 SVG를 사용하여 생성되므로 브라우저에서 적절한 양의 호환성과 모든 차트의 고품질 이미지를 내보낼 수 있습니다. 그러나 DOM에 많은 수의 SVG 요소를 그리면 성능에 부정적인 영향을 줄 수 있습니다. 라이브러리는 stack.gl을 사용하여 고성능 2D 및 3D 차트를 생성합니다.
npm install plotly.js<br>
버전 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
scatter , <code> scatter3d , <code> 표면 및 <code> mesh3d
scatter , <code> scattergl , <code> pointcloud , <code> heatmapgl <code>scatter scatter3d mapbox surface :이 번들에는 scatter <code>mesh3d 및 scattermapbox
scatter , <code> bar scatter, histogram <code>scattergl, pie pointcloud, ahlc <code>heatmapgl 및 candlestick <code>contourgl 트레이스 모듈로 구성됩니다. strict parcoords : 정상적인 번들이 포함되어 있습니다. 이 번들은 표준 번들보다 10% 더 크기 때문에 실제로 필요하지 않으면 사용하지 마십시오.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
