予測チャート

予測チャートでは、指定された値の範囲内の現在のデータと、予測/予想データを視覚化できます。

このチュートリアルでは、予測チャートを使用するようにポートレットを構成する方法を示します。 次の手順を実行します。

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

   <%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.predictive.PredictiveChartConfig" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.MixedDataColumn" %>
   

2. 次のJavaスクリプトレットをview.jspの上部に追加します。 データ系列ごとにMixedDataColumnオブジェクト（単一の数値と3つの数値の配列の両方をサポートする列）を追加し ます。単一の数値は、既存のデータを定義します。 数値の配列は予測/予想データとして使用され、3つの数値（最小値、推定値、および最大値）が含まれます。推定値は塗りつぶされ、最小値と最大値で指定された境界線を持つ強調表示されたエリアで囲まれます。これにより、推定値を視覚化できると同時に、可能な値の範囲を把握できます。addDataColumn()メソッドを使用して各データ系列を追加します。

   <%
   private PredictiveChartConfig _predictiveChartConfig = new
   PredictiveChartConfig();
   
   MixedDataColumn mixedDataColumn1 = new MixedDataColumn(
   "data1", 130, 340, 200, 500, 80, 240, 40,
   new Number[] {370, 400, 450}, new Number[] {210, 240, 270},
   new Number[] {150, 180, 210}, new Number[] {60, 90, 120},
   new Number[] {310, 340, 370});
   
   _predictiveChartConfig.addDataColumn(mixedDataColumn1);
   
   MixedDataColumn mixedDataColumn2 = new MixedDataColumn(
   "data2", 210, 160, 50, 125, 230, 110, 90,
   Arrays.asList(170, 200, 230), Arrays.asList(10, 40, 70),
   Arrays.asList(350, 380, 410), Arrays.asList(260, 290, 320),
   Arrays.asList(30, 70, 150));
   
   _predictiveChartConfig.addDataColumn(mixedDataColumn2);
   
   _predictiveChartConfig.setAxisXTickFormat("%b");
   
   _predictiveChartConfig.setPredictionDate("2018-07-01");
   
   List<String> timeseries = new ArrayList<>();
   
   timeseries.add("2018-01-01");
   timeseries.add("2018-02-01");
   timeseries.add("2018-03-01");
   timeseries.add("2018-04-01");
   timeseries.add("2018-05-01");
   timeseries.add("2018-06-01");
   timeseries.add("2018-07-01");
   timeseries.add("2018-08-01");
   timeseries.add("2018-09-01");
   timeseries.add("2018-10-01");
   timeseries.add("2018-11-01");
   timeseries.add("2018-12-01");
   
   _predictiveChartConfig.setTimeseries(timeseries);
   
   %>
   

   予測チャートには次のプロパティがあります。

   **axisXTickFormat：**X軸の時間形式を指定するオプションの文字列。指定できる形式の詳細については、d3’s time format READMEを参照してください。 この値はsetAxisXTickFormat()メソッドを使用して設定されます。

   **Prediction Date：**予測/予想が表示されてからのタイムラインのポイントを表す文字列としての日付。この値はJavaScriptのDateオブジェクトとして解析され、setPredictionDate()メソッドを使用して設定されます。

   **Time Series：**チャートのX軸に表示されるデータのタイムライン。この値は、日付の配列として設定されます（例：2018-01-01）

3. <chart> taglibをview.jspに追加し、_predictiveChartConfigをconfig属性の値として渡します。

   <chart:predictive
   config="<%= _predictiveChartConfig %>"
   />
   

水色の長方形内に含まれているエリアは、予測/予想値が表示されるポイントです。

関連トピック

Combination Charts

Geomap Charts

Scatter Charts