JavaFX - Gráfico de área empilhada

O gráfico StackedArea é uma variação do gráfico de área que exibe as tendências da contribuição de cada valor (por exemplo - horas extras). As áreas são empilhadas de forma que cada série seja adjacente, mas não se sobreponha à série anterior. Isso contrasta com o gráfico de área, onde cada série se sobrepõe à série anterior.

A seguir está um gráfico empilhado que descreve o crescimento da população.

No JavaFX, um gráfico de área empilhada é representado por uma classe chamada StackedAreaChart. Esta classe pertence ao pacotejavafx.scene.chart. Ao instanciar essa classe, você pode criar um nó StackedAreaChart no JavaFX.

Etapas para gerar gráfico de áreas empilhadas

Para gerar um gráfico de área empilhada no JavaFX, siga as etapas fornecidas abaixo.

Etapa 1: Criação de uma classe

Crie uma classe Java e herde o Application classe do pacote javafx.application. Então você pode implementar ostart() método desta classe da seguinte forma.

public class ClassName extends Application { 
   @Override     
   public void start(Stage primaryStage) throws Exception {     
   }    
}

Etapa 2: Definindo o eixo

Defina os eixos X e Y do gráfico de áreas empilhadas e defina rótulos para eles. Em nosso exemplo, o eixo X representa vários anos de 1750 a 2050. Eles têm unidades de escala principais a cada 50 anos. Enquanto o eixo Y representa o crescimento da população em milhões.

//Defining the X axis               
CategoryAxis xAxis = new CategoryAxis();    

xAxis.setCategories(FXCollections.<String>observableArrayList
   (Arrays.asList("1 750", "1800", "1850", "1900", "1950", "1999", "2050" )));  

//Defining the Y axis 
NumberAxis yAxis = new NumberAxis(0, 10000, 2500); 
yAxis.setLabel("Population in Billions");

Etapa 3: Criação do gráfico de áreas empilhadas

Crie um gráfico de linha instanciando a classe chamada StackedAreaChart do pacote javafx.scene.chart. Para o construtor desta classe, passe os objetos que representam os eixos X e Y criados na etapa anterior.

//Creating the Area chart 
StackedAreaChart<String, Number> areaChart = new StackedAreaChart(xAxis, yAxis);         
areaChart.setTitle("Historic and Estimated Worldwide Population Growth by Region");

Etapa 4: preparando os dados

Instancie o XYChart.Series classe e adicione os dados (uma série de coordenadas xey) à lista Observável desta classe da seguinte forma -

//Prepare XYChart.Series objects by setting data 
XYChart.Series series1 = new XYChart.Series();  
series1.setName("Asia"); 
series1.getData().add(new XYChart.Data("1750", 502)); 
series1.getData().add(new XYChart.Data("1800", 635)); 
series1.getData().add(new XYChart.Data("1850", 809)); 
series1.getData().add(new XYChart.Data("1900", 947)); 
series1.getData().add(new XYChart.Data("1950", 1402)); 
series1.getData().add(new XYChart.Data("1999", 3634)); 
series1.getData().add(new XYChart.Data("2050", 5268));  

XYChart.Series series2 = new XYChart.Series();  
series2.setName("Africa"); 
series2.getData().add(new XYChart.Data("1750", 106)); 
series2.getData().add(new XYChart.Data("1800", 107)); 
series2.getData().add(new XYChart.Data("1850", 111)); 
series2.getData().add(new XYChart.Data("1900", 133)); 
series2.getData().add(new XYChart.Data("1950", 221)); 
series2.getData().add(new XYChart.Data("1999", 767)); 
series2.getData().add(new XYChart.Data("2050", 1766));       

XYChart.Series series3 = new XYChart.Series();  
series3.setName("Europe"); 
series3.getData().add(new XYChart.Data("1750", 163)); 
series3.getData().add(new XYChart.Data("1800", 203)); 
series3.getData().add(new XYChart.Data("1850", 276)); 
series3.getData().add(new XYChart.Data("1900", 408)); 
series3.getData().add(new XYChart.Data("1950", 547)); 
series3.getData().add(new XYChart.Data("1999", 729)); 
series3.getData().add(new XYChart.Data("2050", 628));  

XYChart.Series series4 = new XYChart.Series();  
series4.setName("America"); 
series4.getData().add(new XYChart.Data("1750", 18)); 
series4.getData().add(new XYChart.Data("1800", 31));   

series4.getData().add(new XYChart.Data("1850", 54)); 
series4.getData().add(new XYChart.Data("1900", 156)); 
series4.getData().add(new XYChart.Data("1950", 339)); 
series4.getData().add(new XYChart.Data("1999", 818)); 
series4.getData().add(new XYChart.Data("2050", 1201));  

XYChart.Series series5 = new XYChart.Series();  
series5.setName("Oceania"); 
series5.getData().add(new XYChart.Data("1750", 2)); 
series5.getData().add(new XYChart.Data("1800", 2)); 
series5.getData().add(new XYChart.Data("1850", 2)); 
series5.getData().add(new XYChart.Data("1900", 6)); 
series5.getData().add(new XYChart.Data("1950", 13)); 
series5.getData().add(new XYChart.Data("1999", 30)); 
series5.getData().add(new XYChart.Data("2050", 46));

Etapa 5: adicionar dados ao gráfico de áreas empilhadas

Adicione a série de dados preparada na etapa anterior ao gráfico de áreas empilhadas da seguinte forma -

//Setting the data to area chart        
areaChart.getData().addAll(series1, series2, series3, series4, series5);

Etapa 6: Criação de um objeto de grupo

No start() método, crie um objeto de grupo instanciando a classe chamada Group, que pertence ao pacote javafx.scene.

Passe o objeto StackedAreaChart (nó) criado na etapa anterior como um parâmetro para o construtor da classe Group. Isso deve ser feito para adicioná-lo ao grupo da seguinte forma -

Group root = new Group(stackedAreaChart);

Etapa 7: Criação de um objeto de cena

Crie uma cena instanciando a classe chamada Scene, que pertence ao pacote javafx.scene. Para esta classe, passe o objeto Grupo (root) criado na etapa anterior.

Além do objeto raiz, você também pode passar dois parâmetros duplos que representam a altura e a largura da tela, junto com o objeto da classe Grupo da seguinte maneira.

Scene scene = new Scene(group ,600, 300);

Etapa 8: Definir o título do palco

Você pode definir o título do palco usando o setTitle() método do Stageclasse. oprimaryStage é um objeto Stage, que é passado para o método start da classe Scene como um parâmetro.

Usando o primaryStage objeto, defina o título da cena como Sample Application do seguinte modo.

primaryStage.setTitle("Sample Application");

Etapa 9: Adicionando cena ao palco

Você pode adicionar um objeto Scene ao palco usando o método setScene() da classe chamada Stage. Adicione o objeto Scene preparado nas etapas anteriores usando este método como segue.

primaryStage.setScene(scene);

Etapa 10: Exibindo o conteúdo do palco

Mostra o conteúdo da cena usando o método chamado show() do Stage classe da seguinte forma.

primaryStage.show();

Etapa 11: iniciar o aplicativo

Inicie o aplicativo JavaFX chamando o método estático launch() do Application classe do método principal da seguinte forma.

public static void main(String args[]){   
   launch(args);      
}

Exemplo

A tabela a seguir lista a população de diferentes continentes do ano 1750 até o ano 2050.

	Ásia	África	Europa	América	Oceânia
1750	502	106	163	18	2
1800	635	107	203	31	2
1850	809	111	276	54	2
1900	947	133	408	156	6
1950	1402	221	547	339	13
1999	3634	767	729	818	30
2050	5268	1766	628	1201	46

A seguir está um programa Java que gera um gráfico de área empilhada que descreve os dados acima usando JavaFX.

Salve este código em um arquivo com o nome StackedAreaChartExample.java.

import java.util.Arrays; 
import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.collections.FXCollections; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.chart.CategoryAxis; 
import javafx.stage.Stage; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.StackedAreaChart; 
import javafx.scene.chart.XYChart; 
         
public class StackedAreaChartExample extends Application { 
   @Override 
   public void start(Stage stage) {     
      //Defining the axes               
      CategoryAxis xAxis = new CategoryAxis();      
      xAxis.setCategories(FXCollections.<String>observableArrayList( 
      Arrays.asList("1750", "1800", "1850", "1900", "1950", "1999", "2050" ))); 
         
      NumberAxis yAxis = new NumberAxis(0, 10000, 2500); 
      yAxis.setLabel("Population in Millions");     
      
      //Creating the Area chart 
      StackedAreaChart<String, Number> areaChart = new StackedAreaChart(xAxis, yAxis);
      areaChart.setTitle("Historic and Estimated Worldwide Population Growth by Region");
         
      //Prepare XYChart.Series objects by setting data 
      XYChart.Series series1 = new XYChart.Series();  
      
      series1.setName("Asia"); 
      series1.getData().add(new XYChart.Data("1750", 502)); 
      series1.getData().add(new XYChart.Data("1800", 635)); 
      series1.getData().add(new XYChart.Data("1850", 809)); 
      series1.getData().add(new XYChart.Data("1900", 947)); 
      series1.getData().add(new XYChart.Data("1950", 1402)); 
      series1.getData().add(new XYChart.Data("1999", 3634)); 
      series1.getData().add(new XYChart.Data("2050", 5268));         
                         
      XYChart.Series series2 = new XYChart.Series();  
      series2.setName("Africa"); 
      series2.getData().add(new XYChart.Data("1750", 106)); 
      series2.getData().add(new XYChart.Data("1800", 107)); 
      series2.getData().add(new XYChart.Data("1850", 111)); 
      series2.getData().add(new XYChart.Data("1900", 133)); 
      series2.getData().add(new XYChart.Data("1950", 221)); 
      series2.getData().add(new XYChart.Data("1999", 767)); 
      series2.getData().add(new XYChart.Data("2050", 1766));      
         
      XYChart.Series series3 = new XYChart.Series();   
      series3.setName("Europe"); 
  
      series3.getData().add(new XYChart.Data("1750", 163)); 
      series3.getData().add(new XYChart.Data("1800", 203)); 
      series3.getData().add(new XYChart.Data("1850", 276)); 
      series3.getData().add(new XYChart.Data("1900", 408)); 
      series3.getData().add(new XYChart.Data("1950", 547)); 
      series3.getData().add(new XYChart.Data("1999", 729)); 
      series3.getData().add(new XYChart.Data("2050", 628)); 
         
      XYChart.Series series4 = new XYChart.Series();  
      series4.setName("America"); 
      series4.getData().add(new XYChart.Data("1750", 18)); 
      series4.getData().add(new XYChart.Data("1800", 31)); 
      series4.getData().add(new XYChart.Data("1850", 54)); 
      series4.getData().add(new XYChart.Data("1900", 156)); 
      series4.getData().add(new XYChart.Data("1950", 339)); 
      series4.getData().add(new XYChart.Data("1999", 818)); 
      series4.getData().add(new XYChart.Data("2050", 1201)); 
         
      XYChart.Series series5 = new XYChart.Series();  
      series5.setName("Oceania"); 
      series5.getData().add(new XYChart.Data("1750", 2)); 
      series5.getData().add(new XYChart.Data("1800", 2)); 
      series5.getData().add(new XYChart.Data("1850", 2)); 
      series5.getData().add(new XYChart.Data("1900", 6)); 
      series5.getData().add(new XYChart.Data("1950", 13)); 
      series5.getData().add(new XYChart.Data("1999", 30)); 
      series5.getData().add(new XYChart.Data("2050", 46)); 
                
      //Setting the data to area chart        
      areaChart.getData().addAll(series1, series2, series3, series4, series5); 
         
      //Creating a Group object  
      Group root = new Group(areaChart); 
          
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 400); 
      
      //Setting title to the Stage 
      stage.setTitle("Stacked Area Chart"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show();         
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile e execute o arquivo java salvo no prompt de comando usando os comandos a seguir.

javac StackedAreaChartExample.java 
java StackedAreaChartExample

Ao ser executado, o programa acima gera uma janela JavaFX exibindo um gráfico de áreas empilhadas conforme mostrado abaixo.

↰ Previous page