ドーナツグラフ

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

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" %>

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

<%
DonutChartConfig _donutChartConfig = new DonutChartConfig();

_donutChartConfig.addColumns(
  new SingleValueColumn("data1", 30),
  new SingleValueColumn("data2", 70)
);

%>

<chart> taglibをview.jspに追加し、config属性の値として_donutChartConfigを渡します。
```
<chart:donut
  config="<%= _donutChartConfig %>"
/>
```

ドーナツグラフは円グラフに似ていますが、中央に穴があります。

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

ドーナツグラフ

関連トピック

Not finding what you're looking for?