Spline Charts

Spline charts contain multiple sets of data. A spline chart connects points of data with a smooth curve. Each data series (created with the addColumns() method) is defined with a new instance of the MultiValueColumn object, which takes an ID and a set of values. Follow these steps to configure your portlet to use spline charts.

  1. Import the chart taglib along with the SplineChartConfig and MultiValueColumn classes into your bundle’s init.jsp file:

    <%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
    <%@ page import="com.liferay.frontend.taglib.chart.model.point.spline.SplineChartConfig" %>
    <%@ page import="com.liferay.frontend.taglib.chart.model.MultiValueColumn" %>
    
  2. Add the following Java scriptlet to the top of your view.jsp:

    <%
    SplineChartConfig _splineChartConfig = new SplineChartConfig();
    
    _splineChartConfig.addColumns(
      new MultiValueColumn("data1", 100, 20, 30),
      new MultiValueColumn("data2", 20, 70, 100));
    }
    %>
    
  3. Add the <chart> taglib to the view.jsp, passing the _splineChartConfig as the config attribute’s value:

    <chart:spline
      config="<%= _splineChartConfig %>"
    />
    

Figure 1: A spline chart connects points of data with a smooth curve.

Figure 1: A spline chart connects points of data with a smooth curve.

You can also use an area spline chart if you prefer. An area spline chart highlights the area under the spline curve.

<chart:area-spline 
  config="<%= _splineChartConfig %>" 
/>

Figure 2: An area spline chart highlights the area under the spline curve.

Figure 2: An area spline chart highlights the area under the spline curve.

Awesome! Now you know how to create spline charts for your apps.

« Scatter ChartsStep Charts »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています