2016-08-24 4 views
0

Liferay7에서 차트 도구가 필요합니다. 그런 다음 내 보스가 baidu의 무료 차트 라이브러리 인 Echarts3을 사용하도록 권장했지만 echarts가 js를 사용하는 반면 Liferay는 Jsp를 사용하므로 jsp를 jsp로 가져오고 관련 속성을 설정하는 방법 Liferay 7 에서요? 이것은을 Liferay 또는 JSP (사용 된 프리젠 테이션 계층에 적용) 특정 뭔가 더 사용자가 우리의 응용 프로그램을 만들기 위해 .IN하지Liferay7에서 Echarts3 (baidu의 차트 도구)을 사용하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ECharts</title> 
<!-- including ECharts file --> 
<script src="echarts.js"></script> 
</head> 
<body> 
<!-- prepare a DOM container with width and height --> 
<div id="main" style="width: 600px;height:400px;"></div> 
<script type="text/javascript"> 
    // based on prepared DOM, initialize echarts instance 
    var myChart = echarts.init(document.getElementById('main')); 

    // specify chart configuration item and data 
    var option = { 
     title: { 
      text: 'ECharts entry example' 
     }, 
     tooltip: {}, 
     legend: { 
      data:['Sales'] 
     }, 
     xAxis: { 
      data: ["shirt","cardign","chiffon shirt","pants","heels","socks"] 
     }, 
     yAxis: {}, 
     series: [{ 
      name: 'Sales', 
      type: 'bar', 
      data: [5, 20, 36, 10, 10, 20] 
     }] 
    }; 

    // use configuration item and data specified to show chart 
    myChart.setOption(option); 
</script> 

Get Started with ECharts in 5 minutes

답변

0

입니다 : 여기 는 echarts3 데모입니다 친숙하고 상호 작용하는 많은 미리 만들어진 자바 스크립트 플러그인은 널리 사용 가능합니다. 우리의 목적에 맞게 사용하려면 필요한 데이터와 DOM 요소 (주로 div 또는 클래스)를 제공해야합니다. 대화 형 구조를 최종 사용자에게 제공합니다. Chart Js 또는 Google Charts과 같이 사용할 수있는 차트 작성 프레임 워크가 많이 있으며,이를 구성하는 데 필요한 단계를 거치면 효과적으로 통합 할 수 있습니다. eChart의 경우 주어진 JS를 포함하고 DOM 요소를 제공하고 결국 JSP에서 필요한 데이터를 제공해야합니다.