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

スプライングラフ

スプライングラフには、複数のデータセットが含まれています。 スプライングラフは、データのポイントを滑らかな曲線で接続します。 各データ シリーズ ( addColumns() メソッドで作成) は、ID と値のセットを受け取る MultiValueColumn オブジェクトの新しいインスタンスで定義されます。 次の手順に従って、スプライングラフを使用するようにポートレットを構成します。

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

    <%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
    <%@ page import="com.liferay.frontend.taglib.chart.model.point.spline.SplineChartConfig" %>
    <%@ page import="com.liferay.frontend.taglib.chart.model.MultiValueColumn" %>
    
  2. 次のJavaスクリプトレットをview.jspの先頭に追加します。

    <%
    SplineChartConfig _splineChartConfig = new SplineChartConfig();
    
    _splineChartConfig.addColumns(
      new MultiValueColumn("data1", 100, 20, 30),
      new MultiValueColumn("data2", 20, 70, 100));
    %>
    
  3. <chart> タグライブラリを view.jspに追加し、 _splineChartConfigconfig 属性の値として渡します。

    <chart:spline
      config="<%= _splineChartConfig %>"
    />
    

スプライングラフは、データのポイントを滑らかな曲線で接続します。

必要に応じて、エリアスプライングラフを使用することもできます。 エリアスプライングラフは、スプライン曲線の下のエリアを強調表示します。

<chart:area-spline
  config="<%= _splineChartConfig %>"
/>

エリアスプライングラフは、スプライン曲線の下のエリアを強調表示します。

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