Documentation

Documentation Menu
Go Back

ステップグラフ

ステップグラフには、複数のデータセットが含まれています。 ステップグラフでは、データのポイント間に段差があり、階段に似ています。 各データ系列(addColumns()メソッドで作成)は、IDと値のセットを受け取る MultiValueColumnオブジェクト の新しいインスタンスで定義されます。 次の手順に従って、ステップグラフを使用するようにポートレットを構成します。

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

    <%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
    <%@ page import="com.liferay.frontend.taglib.chart.model.point.step.StepChartConfig" %>
    <%@ page import="com.liferay.frontend.taglib.chart.model.MultiValueColumn" %>
    
  2. 次のJavaスクリプトレットをview.jspの先頭に追加します。

    <%
    StepChartConfig _stepChartConfig = new StepChartConfig();
    
    _stepChartConfig.addColumns(
      new MultiValueColumn("data1", 100, 20, 30),
      new MultiValueColumn("data2", 20, 70, 100));
    }
    %>
    
  3. <chart> taglibをview.jspに追加し、config属性の値として_stepChartConfigを渡します。

    <chart:step
      config="<%= _stepChartConfig %>"
    />
    

ステップグラフでは、データのポイント間に段差があり、階段に似ています。

必要に応じて、エリアステップグラフを使用することもできます。 エリアステップグラフは、ステップグラフでカバーされるエリアを強調表示します。

<chart:area-step 
  config="<%= _stepChartConfig %>" 
/>

エリアステップグラフは、ステップグラフでカバーされるエリアを強調表示します。

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