Documentation

Documentation Menu
Go Back

予測グラフ

予測グラフを使用すると、現在のデータと、特定の値の範囲内の予測/予想データを視覚化できます。

予測/予想データは、可能な値の強調表示された領域で囲まれています。

予測グラフを使用するには、次の手順に従います。

  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()メソッドを使用して設定されます。

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

    時系列: グラフのX軸に表示されるデータのタイムライン。 この値は、日付の配列として設定されます(例:2018-01-01 )。

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

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

水色の四角で囲まれた部分が、予測/予想値を示すポイントです。

予測グラフを使用すると、既存のデータと一緒に将来の推定データを視覚化できます。

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

関連トピック