Gauge Charts

ゲージグラフはパーセンテージベースです。 ゲージグラフは、パーセンテージベースのデータが特定の範囲内でどの位置にあるかを示します。 各データ セットは、 SingleValueColumn オブジェクトの新しいインスタンスとして定義する必要があります。 次の手順に従って、ゲージグラフを使用するようにポートレットを構成します。

1. Chart taglibをGaugeChartConfigクラスとSingleValueColumnクラスとともにバンドルのinit.jspファイルにインポートします。

   <%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.gauge.GaugeChartConfig" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.SingleValueColumn" %>
   

2. 次のJavaスクリプトレットをview.jspの先頭に追加します。

   <%
   GaugeChartConfig _gaugeChartConfig = new GaugeChartConfig();
   
   _gaugeChartConfig.addColumn(
     new SingleValueColumn("data1", 85.4)
   );
   %>
   

3. <chart> タグライブラリを view.jspに追加し、 _gaugeChartConfig を config 属性の値として渡します。

   <chart:gauge
     config="<%= _gaugeChartConfig %>"
   />
   

これで、アプリのゲージグラフを作成する方法がわかりました。

関連トピック

• 円グラフ
• Donut Charts
• Bar Charts