スプライングラフ

スプライングラフには複数のデータセットが含まれます。スプライングラフは、データの点を滑らかな曲線で接続します。各データ系列（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> taglibをview.jspに追加し、_splineChartConfigをconfig属性の値として渡します。

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

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

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

関連トピック

Bar Charts

Scatter Charts

Step Charts