棒グラフ

棒グラフには複数のデータセットが含まれます。棒グラフは、データを棒でモデル化します。 各データ系列(addColumns()メソッドで作成)は、IDと値のセットを取るMultiValueColumn オブジェクトの新しいインスタンスで定義され ます。このチュートリアルでは、棒グラフを使用するようにポートレットを構成する方法を示します。

次の手順を実行します。

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

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

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

    <chart:bar
    config="<%= _barChartConfig %>"
    />
    

図1:棒グラフは、データを棒でモデル化します。

関連トピック

Line Charts

Scatter Charts

Spline Charts

« ポートレットでChart Taglibを使用する折れ線グラフ »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています