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

Combination Charts

組み合わせグラフは、他のグラフとわずかな違いがあります。組み合わせチャートでは、各データセットの表現タイプを定義する必要があります: 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> タグライブラリを view.jspに追加し、 _combinationChartConfig を config 属性の値として渡します。
```
<chart:combination
  config="<%= _combinationChartConfig %>"
/>
```