Jumping Bytes and Hopping Bits
the church of tech
Menu

c3 chart 예제 August 2, 2019

[…] C3js는 D3js 위에 있는 그래프 자바스크립트 라이브러리입니다. 프로젝트의 경우 그래프가 필요했고 결국 c3js를 사용하게 되었습니다. 어떻게 이런 일이 있었고 우리가 취한 첫 번째 단계 중 일부는 그의 블로그 게시물에 로베르토 반 데르 린덴에 의해 기록됩니다 : C3.js로 차트를 만드는 […] 누적 된 막대를 얻으려면 차트를 렌더링하거나 chart.transform을 호출하기 전에 chart.groups ([`data1′,`data2`,…])를 호출하십시오. dtitle은 매개 변수를 사용하여 그래프를 새로 고치는 방법을 제어하는 부작용을 일부 제어할 수 있습니다. 개체가 dtitle로 전달되고 두 번째 매개 변수 새로 고침은 모든 속성을 새로 고쳐야 하는지 아니면 차트 제목만 새로 고쳐야 하는지 여부를 나타냅니다. 새로 고침을 false로 설정하면 제목이 새로 고쳐지고 데이터, 색상 및 축 속성의 변경 내용만 무시됩니다. 짧은 예는 아래와 같습니다. 드릴다운 예제를 참조하여 dttile이 어떻게 사용되는지 및 잠재적인 부작용을 확인할 수 있습니다. 생성하는 차트가 여러 개 있는 경우 성능이 다소 끔찍할 수 있습니다.

이제 차트를 렌더링 할 수있는 코드의 매우 작은 금액으로, 여기에 Github 리포지토리 예제의 코드입니다 : 우리는 차트를 렌더링 한 후 우리는 다음 Xvfb를 중지 합니다. Ack. 도구 설명으로 간단한 줄선 차트를 만드는 데 필요한 모든 코드였습니다… 우리는 심지어 전설과 임시 무료로 라인을 사용하지 않도록 설정하는 옵션을 가지고! 이제 추가 수평선을 만들어 보겠습니다. 이것은 매우 쉬웠습니다! 물론 데이터가 훨씬 더 복잡할 수 있으므로 내부 배열에 더 많은 값을 넣는 것은 동일한 인덱스의 값을 서로 비교하는 것을 의미합니다. 우리는 우리의 차트 정의를 밖으로 사양했다. 이제 실제로 차트를 생성할 차례입니다. 앞서 보여 드시면 c3 차트 메이커를 전 세계적으로 설치했다고 가정하면 다음과 같은 명령을 실행할 수 있습니다: Hi Madasuk, 아니요, 예는 없지만 제 동료 Jettro는 현재 AngularJS의 지시문으로 이러한 차트에 대한 블로그 게시물을 작업하고 있습니다. 아마도 당신이 우리의 블로그에 눈을 유지 🙂 도움이 될 수 있습니다! 이 게시물에서 우리는 Node.js에서 차트 렌더링에 대해 배웠습니다. 실제로 이 기술을 사용하여 모든 종류의 시각화 및 보고서를 베이크할 수 있습니다. C3 사용 방법에 대한 http://c3js.org/examples.html 참조하십시오.

아래 “로드” 버튼을 누르면 이 코드가 실행되고 차트가 업데이트됩니다. 명령줄에서 직접 c3 차트 메이커를 실행할 수 있습니다. 먼저 다음과 같이 전역적으로 설치해야 합니다: Github 리포지토리에는 일부 샘플 입력 데이터가 포함되어 있으며 데이터 하위 디렉토리에서 CSV 파일 예제 data.csv를 찾을 수 있습니다. 이 데이터는 특정 거래 전략을 위해 실행 한 백테스트에서 출력됩니다. 체크 아웃 가자. 후원자를 위해 나는 당신이 그것을 필요로하는 경우, 그냥 물어 주시기 바랍니다 더 구체적또는 사용자 정의 코드 예제를 제공 드리겠습니다. API를 사용하여 차트가 렌더링된 후 차트를 업데이트할 수 있습니다. 여기에 API의 일부를 소개합니다. API는 생성()에서 반환된 개체를 통해 호출할 수 있습니다. 차트의 기본 유형은 막대여야하지만 온도가 선으로 표시되기를 원합니다 : 이것에 대한 놀라운 점은 Node.js에서 차트 정의를 생성하고 헤드리스 브라우저로 전달한다는 것입니다. 이를 통해 Node.js 코드에서 데이터를 유연히 설정할 수 있습니다.

CSV 파일에서 데이터를 가져왔거나 (c3 차트 제작자가하는 것처럼) 데이터베이스에서 데이터를 가져 왔습니다. 우리는 또한 우리의 Node.js 코드에서 모든 차트 옵션을 제어 할 수 있습니다. 그래서, 이것이 Node.js에서 효과적으로 차트 렌더링, 멋진 응 이유입니다.

Categories: Uncategorized