2016-08-24 3 views
0

私はLiferay7でチャートツールが必要です。私の上司はbaiduの無料チャート作成ライブラリであるEcharts3を使うことを勧めましたが、echartsはjsを使うのに対し、LiferayはJspを使っています。 Liferay 7で?ここ はecharts3デモです: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

これは、LiferayのかさえJSPに固有のもの(使用されるすべてのプレゼンテーション層に適用されます)私たちのアプリケーションを作成するため.IN以上のユーザーではありませんフレンドリーでインタラクティブな、多くのあらかじめ構築されたjavascriptプラグインは広く利用可能です。私たちの目的にそれらを使用するためには、必要なデータとDOM要素(主にdivやクラス)を提供する必要があります。エンドユーザーにインタラクティブな構造を提供します。 Chart JsまたはGoogle Chartsのような他の多くのチャートフレームワークがあります。これらのフレームワークは、設定に必要な手順を経ると効果的に統合できます。 eChartの場合、指定されたJSを組み込み、DOM要素を提供し、最後にJSPから必要なデータを提供する必要があります。

関連する問題