ドーナツグラフ

ドーナツグラフはパーセンテージベースです。ドーナツグラフは円グラフに似ていますが、中央に穴があります。各データセットは、SingleValueColumnオブジェクトの新しいインスタンスとして定義する必要があります。 このチュートリアルでは、ドーナツグラフを使用するようにポートレットを構成する方法を示します。

次の手順を実行します。

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

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

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

   <%
   DonutChartConfig _donutChartConfig = new DonutChartConfig();
   
   _donutChartConfig.addColumns(
   new SingleValueColumn("data1", 30),
   new SingleValueColumn("data2", 70)
   );
   
   %>
   

3. <chart> taglibをview.jspに追加し、_donutChartConfigをconfig属性の値として渡します。

   <chart:donut
   config="<%= _donutChartConfig %>"
   />
   

関連トピック

Donut Charts

Gauge Charts

Pie Charts