JSChart는 통계 정보에 자주 사용되는 아이콘을 웹 페이지에 생성할 수 있는 매우 사용하기 쉬운 JS 구성 요소입니다. 이번 글은 주로 JsChart 컴포넌트의 사용법에 대한 자세한 설명을 소개합니다. 도움이 필요한 친구들이 참고하면 됩니다
JsChart란?
JSChart는 통계 정보에 자주 사용되는 웹 페이지에 아이콘을 생성할 수 있는 매우 사용하기 쉬운 JS 구성 요소입니다.
JsChart를 사용하세요
하나. jscharts.js
II를 가져옵니다. jscharts.jsp 테스트 페이지 작성
1. JScarts 라이브러리를 다운로드합니다. 공식 웹사이트에서 Jscharts 라이브러리를 다운로드합니다. 압축된 패키지에 있는 jscharts.js 파일을 사용합니다. 약 150KB입니다.
JScarts 라이브러리 사용 웹 페이지 파일(예: .html 또는 .jsp)에 JScarts 라이브러리를 포함합니다.
<script type="text/javascript" src="js/jscharts.js"></script>
컨테이너 정의 JScarts에서 생성된 이미지를 웹 페이지 파일에 표시하려면 해당 이미지를 웹 페이지 컨테이너에 넣어야 합니다. 우리는 일반적으로
태그를 사용하여 이 웹 페이지 컨테이너를 정의하며, 이 p 요소에 대한 고유 ID 값을 지정하는 것이 필수입니다. 예:
<p id="chartcontainer">这里将用来显示图形报表</p>
참고: 이 p 컨테이너의 콘텐츠는 JScarts 이미지로 대체됩니다.
JScarts 이미지 표시 다음으로 선형 그래프를 표시하기 위한 소량의 코드를 작성해야 합니다. 먼저, 이미지에 필요한 데이터를 준비해야 합니다. JavaScript 배열을 사용하여 데이터를 제공할 수 있습니다. 배열의 각 요소는 2개의 요소로 구성됩니다
<script type="text/javascript"> var myData = new Array([ "商品1", 20 ], [ "商品2", 10 ], [ "商品3", 30 ], [ "商品4", 10 ], [ "商品5", 5 ]); var myChart = new JSChart('chartcontainer', 'line'); myChart.setDataArray(myData); myChart.draw(); </script>
5. 자세한 사용 지침은 다음과 같습니다. 네, 앞으로 모든 분들께 도움이 되기를 바랍니다.
관련 기사:
Vue 내장 컴포넌트 컴포넌트의 적용 시나리오에 대한 간략한 토론vue2에서 less를 사용하는 간단한 튜토리얼vue 버튼 컴포넌트 개발을 위한 샘플 코드위 내용은 JsChart 컴포넌트의 사용법과 기능을 자세히 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!