組み合わせグラフ

組み合わせグラフは、他のグラフとわずかな違いがあります。組み合わせグラフでは、各データセットの表現タイプ（AREA、AREA_SPLINE、AREA_STEP、BAR、BUBBLE、DONUT、GAUGE、LINE、PIE、SCATTER、SPLINE、STEP）を定義する必要があります。組み合わせグラフの各データセットは、TypedMultiValueColumnオブジェクトのインスタンスです。各オブジェクトは、データのID、表現タイプ、および値を受け取ります。次の手順に従って、組み合わせグラフを使用するようにポートレットを構成します。

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

<%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
<%@ page import="com.liferay.frontend.taglib.chart.model.combination.CombinationChartConfig" %>
<%@ page import="com.liferay.frontend.taglib.chart.model.MultiValueColumn" %>
<%@ page import="com.liferay.frontend.taglib.chart.model.TypedMultiValueColumn.Type" %>

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

<%
CombinationChartConfig _combinationChartConfig =
new CombinationChartConfig();

_combinationChartConfig.addColumns(
  new TypedMultiValueColumn(
    "data1", Type.BAR, 30, 20, 50, 40, 60, 50),
  new TypedMultiValueColumn(
    "data2", Type.BAR, 200, 130, 90, 240, 130, 220),
  new TypedMultiValueColumn(
    "data3", Type.SPLINE, 300, 200, 160, 400, 250, 250),
  new TypedMultiValueColumn(
    "data4", Type.LINE, 200, 130, 90, 240, 130, 220),
  new TypedMultiValueColumn(
    "data5", Type.BAR, 130, 120, 150, 140, 160, 150),
  new TypedMultiValueColumn(
    "data6", Type.AREA, 90, 70, 20, 50, 60, 120));

_combinationChartConfig.addGroup("data1", "data2");

%>

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

組み合わせグラフには、さまざまなデータセットのタイプが表示されます。

これで、アプリの組み合わせグラフを作成する方法がわかりました。

組み合わせグラフ

関連トピック

Not finding what you're looking for?