Chart Tag Library
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

ドーナツグラフ

ドーナツグラフはパーセンテージベースです。 ドーナツグラフは円グラフに似ていますが、中央に穴があります。 各データ セットは、 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> タグライブラリを view.jspに追加し、 _donutChartConfigconfig 属性の値として渡します。

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

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

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