JsChart 구성 요소 사용에 대한 자세한 설명

이번에는 JsChart 컴포넌트 사용에 대한 자세한 설명을 가져왔습니다. JsChart 컴포넌트 사용 시 주의사항은 무엇인가요?

JsChart란 무엇인가요?

JSChart는 통계 정보에 자주 사용되는 웹 페이지에 아이콘을 생성할 수 있는 매우 사용하기 쉬운 JS 구성 요소입니다.

JsChart를 사용하세요

하나. jscharts.js

II를 가져옵니다. jscharts.jsp 테스트 페이지 작성

1. JScarts 라이브러리를 다운로드합니다. 공식 웹사이트에서 Jscharts 라이브러리를 다운로드합니다. 압축된 패키지에 있는 jscharts.js 파일을 사용합니다. 약 150KB입니다.

JScarts 라이브러리 사용 웹 페이지 파일(예: .html 또는 .jsp)에 JScarts 라이브러리를 포함합니다.

<script></script>

컨테이너 정의 JScarts에서 생성된 이미지를 웹 페이지 파일에 표시하려면 해당 이미지를 웹 페이지 컨테이너에 넣어야 합니다. 우리는 일반적으로

태그를 사용하여 이 웹 페이지 컨테이너를 정의하며, 이 p 요소에 대한 고유 ID 값을 지정하는 것이 필수입니다. 예:

<p>这里将用来显示图形报表</p>

참고: 이 p 컨테이너의 콘텐츠는 JScarts 이미지로 대체됩니다.

JScarts 이미지 표시 다음으로 선형 그래프를 표시하기 위한 소량의 코드를 작성해야 합니다. 먼저, 이미지에 필요한 데이터를 준비합니다. JavaScript 배열을 사용하여 배열의 각 요소는

<script>
 var myData = new Array([ "商品1", 20 ], [ "商品2", 10 ], [ "商品3", 30 ], [ "商品4", 10 ],
  [ "商品5", 5 ]);
 var myChart = new JSChart(&#39;chartcontainer&#39;, &#39;line&#39;);
 myChart.setDataArray(myData);
 myChart.draw();
 </script>

5개의 요소로 구성됩니다.

 <p>这里将用来显示图形报表</p>
 <script>
 //支持js二维数组、json格式、xml格式数据源
 var myData = new Array([ "商品1", 20 ], [ "商品2", 10 ], [ "商品3", 30 ], [ "商品4", 10 ],
  [ "商品5", 5 ]);
  //第二个参数值有：line,bar,pie分别表示用线形图、柱状图、饼图来展示报表
 var myChart = new JSChart(&#39;chartcontainer&#39;, &#39;line&#39;);
 //数据源处理方式一：setDataArray(myData)使用js数组
 //myChart.setDataArray(myData);
 //数据源处理方式二：setDataJSON使用json格式数据
 //myChart.setDataJSON("data.json");
 //数据源处理方式三：setDataXML使用xml格式数据
 myChart.setDataXML("data.xml");
 
 myChart.setTitle(&#39;测试报表&#39;);
 
 myChart.draw();
 </script>
 


统计指定时间段向各个供应商的采购金额
使用selectsupplier.jsp
action:
@Resource
 private AccountRecordsService accountRecordsService;
 @RequestMapping("/selectSupplier")
 @ResponseBody
 public Object selectSupplier(String start,String end){
 System.out.println("start:"+ start+"||end:"+end);
 Map paramMap =new HashMap();
 paramMap.put("start", start);
 paramMap.put("end", end);
 return accountRecordsService.selectSupplier(paramMap);
 }
public interface AccountRecordsService extends BaseService {
 List

이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

H5

의 의미 태그 WebGL이 json 및 echarts 차트를 작동하는 방법

위 내용은 JsChart 구성 요소 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!