javafx最全图表教程（包含扇形图 柱状图 折线图 面积图 气泡图 散布图 堆叠面积

注意：本文中的项目运行环境为jre 1.8.0_231。

最终实现效果

扇形图预览

柱状图预览

折线图预览

面积图预览

气泡图预览

散布图预览

堆叠面积图预览

堆叠柱状图预览

说明：整体程序由三部分组成：java 源码、fxml文件和css文件。下面是项目结构图：

Main.java

package chart;import javafx.application.Application;import javafx.fxml.FXMLLoader;import javafx.scene.Parent;import javafx.scene.Scene;import javafx.scene.chart.*;import javafx.stage.Stage;public class Main extends Application{public void start(Stage primaryStage)throws Exception{Parent root = FXMLLoader.load(getClass().getResource("main_view.fxml"));//扇形图PieChart pieChart = (PieChart)root.lookup("#pieChart");PieChartUtils pieChartUtils = new PieChartUtils(pieChart);pieChartUtils.operatePieChart();//柱状图BarChart bc = (BarChart)root.lookup("#barChart");BarChartUtils barChartUtils = new BarChartUtils(bc);barChartUtils.operateBarChart();//堆叠柱状图StackedBarChart stackedBarChart = (StackedBarChart)root.lookup("#stackedBarChart");StackedBarChartUtils stackedBarChartUtils = new StackedBarChartUtils(stackedBarChart);stackedBarChartUtils.operateStackedBarChart();//折线图LineChart lineChart = (LineChart)root.lookup("#lineChart");LineChartUtils lineChartUtils = new LineChartUtils(lineChart);lineChartUtils.operateLineChart();//面积图AreaChart areaChart = (AreaChart)root.lookup("#areaChart");AreaChartUtils areaChartUtils = new AreaChartUtils(areaChart);areaChartUtils.operateAreaChart();//堆叠面积图StackedAreaChart stackedAreaChart = (StackedAreaChart) root.lookup("#stackedAreaChart");StackedAreaChartUtils stackedAreaChartUtils = new StackedAreaChartUtils(stackedAreaChart);stackedAreaChartUtils.operateStackedAreaChart();//气泡图BubbleChart bubbleChart = (BubbleChart)root.lookup("#bubbleChart");BubbleChartUtils bubbleChartUtils = new BubbleChartUtils(bubbleChart);bubbleChartUtils.operateBubbleChart();//散布图ScatterChart scatterChart = (ScatterChart) root.lookup("#scatterChart");ScatterChartUtils scatterChartUtils = new ScatterChartUtils(scatterChart);scatterChartUtils.operateScatterChart();primaryStage.setTitle("图表Chart");primaryStage.setScene(new Scene(root, 797, 484));primaryStage.show();}}

PieChartUtils.java

package chart;import javafx.collections.FXCollections;import javafx.collections.ObservableList;import javafx.geometry.Side;import javafx.scene.chart.PieChart;import java.util.HashMap;import java.util.Map;class PieChartUtils{private PieChart pieChart;private ObservableList<PieChart.Data> pieChartData;PieChartUtils(PieChart pieChart){pieChartData = FXCollections.observableArrayList();this.pieChart = pieChart;}private void addData(String name, double value){pieChartData.add(new PieChart.Data(name, value));}private void showChart(){pieChart.setData(pieChartData);}private void setDataColor(int index, String color){pieChartData.get(index).getNode().setStyle("-fx-background-color: "+ color);}private void setMarkVisible(boolean b){pieChart.setLabelsVisible(b);}private void setLegendColor(HashMap<Integer, String> colors){String setColor = "";for(Map.Entry<Integer, String> entry:colors.entrySet()){int index = entry.getKey();String color = entry.getValue();setColor = setColor.concat("CHART_COLOR_" + (index+1) + ":" + color+";");}pieChart.setStyle(setColor);}private void setLegendSide(String side){if(side.equalsIgnoreCase("top"))pieChart.setLegendSide(Side.TOP);else if(side.equalsIgnoreCase("bottom"))pieChart.setLegendSide(Side.BOTTOM);else if(side.equalsIgnoreCase("left"))pieChart.setLegendSide(Side.LEFT);else{pieChart.setLegendSide(Side.RIGHT);}}private void setTitle(String title){pieChart.setTitle(title);}void operatePieChart(){PieChartUtils pieChartUtils = new PieChartUtils(pieChart);pieChartUtils.addData("R", 0.5);pieChartUtils.addData("G", 0.3);pieChartUtils.addData("B", 0.2);//显示图表pieChartUtils.showChart();//必须在图标显示之后才能修改数据区域颜色pieChartUtils.setDataColor(0, "red");pieChartUtils.setDataColor(1, "green");pieChartUtils.setDataColor(2, "blue");//取消标示pieChartUtils.setMarkVisible(false);//设置扇形图数据系列的颜色HashMap<Integer, String> hashMap = new HashMap<>();hashMap.put(0, "red");hashMap.put(1, "green");hashMap.put(2, "blue");//设置图例颜色和方位pieChartUtils.setLegendColor(hashMap);pieChartUtils.setLegendSide("Bottom");//设置图表的标题pieChartUtils.setTitle("RGB");}}

BarChartUtils.java

package chart;import javafx.scene.chart.BarChart;import javafx.scene.chart.CategoryAxis;import javafx.scene.chart.NumberAxis;import javafx.scene.chart.XYChart;class BarChartUtils{private BarChart bc;BarChartUtils(BarChart barChart){this.bc = barChart;}void operateBarChart(){//两条轴线final CategoryAxis xAxis = (CategoryAxis) bc.getXAxis();final NumberAxis yAxis = (NumberAxis) bc.getYAxis();//图表标题bc.setTitle("Country Summary");//轴名xAxis.setLabel("Value");yAxis.setLabel("Country");final String austria = "Austria";final String brazil = "Brazil";final String france = "France";final String italy = "Italy";final String usa = "USA";//系列1XYChart.Series<String, Double> series1 = new XYChart.Series<>();series1.setName("");series1.getData().add(new XYChart.Data<>(austria, 25601.34));series1.getData().add(new XYChart.Data<>(brazil, 8.82));series1.getData().add(new XYChart.Data<>(france, 10000.00));series1.getData().add(new XYChart.Data<>(italy, 35407.15));series1.getData().add(new XYChart.Data<>(usa, 12000.00));//系列2XYChart.Series<String , Double> series2 = new XYChart.Series<>();series2.setName("");series2.getData().add(new XYChart.Data<>(austria, 57401.85));series2.getData().add(new XYChart.Data<>(brazil, 41941.19));series2.getData().add(new XYChart.Data<>(france, 45263.37));series2.getData().add(new XYChart.Data<>(italy, 117320.16));series2.getData().add(new XYChart.Data<>(usa, 14845.27));//系列3XYChart.Series<String, Double> series3 = new XYChart.Series<>();series3.setName("");series3.getData().add(new XYChart.Data<>(austria, 45000.65));series3.getData().add(new XYChart.Data<>(brazil, 44835.76));series3.getData().add(new XYChart.Data<>(france, 18722.18));series3.getData().add(new XYChart.Data<>(italy, 17557.31));series3.getData().add(new XYChart.Data<>(usa, 92633.68));//显示图表bc.getData().addAll(series1, series2, series3);}}

LineChartUtils.java

package chart;import javafx.scene.chart.CategoryAxis;import javafx.scene.chart.LineChart;import javafx.scene.chart.NumberAxis;import javafx.scene.chart.XYChart;class LineChartUtils{private LineChart lineChart;LineChartUtils(LineChart lineChart){this.lineChart = lineChart;}void operateLineChart(){//声明两条轴final CategoryAxis xAxis = (CategoryAxis) lineChart.getXAxis();final NumberAxis yAxis = (NumberAxis) lineChart.getYAxis();//定义轴的名称xAxis.setLabel("月份");yAxis.setLabel("股");yAxis.setAnimated(true);//定义表格名称lineChart.setTitle("股票监控");//系列1XYChart.Series<String, Number> series1 = new XYChart.Series<>();series1.setName("城市1");series1.getData().add(new XYChart.Data<>("Jan", 23));series1.getData().add(new XYChart.Data<>("Feb", 14));series1.getData().add(new XYChart.Data<>("Mar", 15));series1.getData().add(new XYChart.Data<>("Apr", 24));series1.getData().add(new XYChart.Data<>("May", 34));series1.getData().add(new XYChart.Data<>("Jun", 36));series1.getData().add(new XYChart.Data<>("Jul", 22));series1.getData().add(new XYChart.Data<>("Aug", 45));series1.getData().add(new XYChart.Data<>("Sep", 43));series1.getData().add(new XYChart.Data<>("Oct", 17));series1.getData().add(new XYChart.Data<>("Nov", 29));series1.getData().add(new XYChart.Data<>("Dec", 25));//系列2XYChart.Series<String, Number> series2 = new XYChart.Series<>();series2.setName("城市2");series2.getData().add(new XYChart.Data<>("Jan", 33));series2.getData().add(new XYChart.Data<>("Feb", 34));series2.getData().add(new XYChart.Data<>("Mar", 25));series2.getData().add(new XYChart.Data<>("Apr", 44));series2.getData().add(new XYChart.Data<>("May", 39));series2.getData().add(new XYChart.Data<>("Jun", 16));series2.getData().add(new XYChart.Data<>("Jul", 55));series2.getData().add(new XYChart.Data<>("Aug", 54));series2.getData().add(new XYChart.Data<>("Sep", 48));series2.getData().add(new XYChart.Data<>("Oct", 27));series2.getData().add(new XYChart.Data<>("Nov", 37));series2.getData().add(new XYChart.Data<>("Dec", 29));//系列3XYChart.Series<String, Number> series3 = new XYChart.Series<>();series3.setName("城市3");series3.getData().add(new XYChart.Data<>("Jan", 44));series3.getData().add(new XYChart.Data<>("Feb", 35));series3.getData().add(new XYChart.Data<>("Mar", 36));series3.getData().add(new XYChart.Data<>("Apr", 33));series3.getData().add(new XYChart.Data<>("May", 31));series3.getData().add(new XYChart.Data<>("Jun", 26));series3.getData().add(new XYChart.Data<>("Jul", 22));series3.getData().add(new XYChart.Data<>("Aug", 25));series3.getData().add(new XYChart.Data<>("Sep", 43));series3.getData().add(new XYChart.Data<>("Oct", 44));series3.getData().add(new XYChart.Data<>("Nov", 45));series3.getData().add(new XYChart.Data<>("Dec", 44));//显示图表lineChart.getData().addAll(series1, series2, series3);}}

AreaChartUtils.java

package chart;import javafx.scene.chart.CategoryAxis;import javafx.scene.chart.LineChart;import javafx.scene.chart.NumberAxis;import javafx.scene.chart.XYChart;class LineChartUtils{private LineChart lineChart;LineChartUtils(LineChart lineChart){this.lineChart = lineChart;}void operateLineChart(){//声明两条轴final CategoryAxis xAxis = (CategoryAxis) lineChart.getXAxis();final NumberAxis yAxis = (NumberAxis) lineChart.getYAxis();//定义轴的名称xAxis.setLabel("月份");yAxis.setLabel("股");yAxis.setAnimated(true);//定义表格名称lineChart.setTitle("股票监控");//系列1XYChart.Series<String, Number> series1 = new XYChart.Series<>();series1.setName("城市1");series1.getData().add(new XYChart.Data<>("Jan", 23));series1.getData().add(new XYChart.Data<>("Feb", 14));series1.getData().add(new XYChart.Data<>("Mar", 15));series1.getData().add(new XYChart.Data<>("Apr", 24));series1.getData().add(new XYChart.Data<>("May", 34));series1.getData().add(new XYChart.Data<>("Jun", 36));series1.getData().add(new XYChart.Data<>("Jul", 22));series1.getData().add(new XYChart.Data<>("Aug", 45));series1.getData().add(new XYChart.Data<>("Sep", 43));series1.getData().add(new XYChart.Data<>("Oct", 17));series1.getData().add(new XYChart.Data<>("Nov", 29));series1.getData().add(new XYChart.Data<>("Dec", 25));//系列2XYChart.Series<String, Number> series2 = new XYChart.Series<>();series2.setName("城市2");series2.getData().add(new XYChart.Data<>("Jan", 33));series2.getData().add(new XYChart.Data<>("Feb", 34));series2.getData().add(new XYChart.Data<>("Mar", 25));series2.getData().add(new XYChart.Data<>("Apr", 44));series2.getData().add(new XYChart.Data<>("May", 39));series2.getData().add(new XYChart.Data<>("Jun", 16));series2.getData().add(new XYChart.Data<>("Jul", 55));series2.getData().add(new XYChart.Data<>("Aug", 54));series2.getData().add(new XYChart.Data<>("Sep", 48));series2.getData().add(new XYChart.Data<>("Oct", 27));series2.getData().add(new XYChart.Data<>("Nov", 37));series2.getData().add(new XYChart.Data<>("Dec", 29));//系列3XYChart.Series<String, Number> series3 = new XYChart.Series<>();series3.setName("城市3");series3.getData().add(new XYChart.Data<>("Jan", 44));series3.getData().add(new XYChart.Data<>("Feb", 35));series3.getData().add(new XYChart.Data<>("Mar", 36));series3.getData().add(new XYChart.Data<>("Apr", 33));series3.getData().add(new XYChart.Data<>("May", 31));series3.getData().add(new XYChart.Data<>("Jun", 26));series3.getData().add(new XYChart.Data<>("Jul", 22));series3.getData().add(new XYChart.Data<>("Aug", 25));series3.getData().add(new XYChart.Data<>("Sep", 43));series3.getData().add(new XYChart.Data<>("Oct", 44));series3.getData().add(new XYChart.Data<>("Nov", 45));series3.getData().add(new XYChart.Data<>("Dec", 44));//显示图表lineChart.getData().addAll(series1, series2, series3);}}

BubbleChartUtils.java

package chart;import javafx.scene.chart.BubbleChart;import javafx.scene.chart.NumberAxis;import javafx.scene.chart.XYChart;class BubbleChartUtils{private BubbleChart bubbleChart;BubbleChartUtils(BubbleChart bubbleChart){this.bubbleChart = bubbleChart;}void operateBubbleChart(){//获取两条轴的对象NumberAxis xAxis = (NumberAxis)bubbleChart.getXAxis();NumberAxis yAxis = (NumberAxis)bubbleChart.getYAxis();//设定轴线的名称xAxis.setLabel("周");yAxis.setLabel("产品预算");//设定表格名称bubbleChart.setTitle("预算监控");//数据1XYChart.Series<Number, Number> series1 = new XYChart.Series();series1.setName("Product 1");series1.getData().add(new XYChart.Data<>(3, 35));series1.getData().add(new XYChart.Data<>(12, 60));series1.getData().add(new XYChart.Data<>(15, 15));series1.getData().add(new XYChart.Data<>(22, 30));series1.getData().add(new XYChart.Data<>(28, 20));series1.getData().add(new XYChart.Data<>(35, 41));series1.getData().add(new XYChart.Data<>(42, 17));series1.getData().add(new XYChart.Data<>(49, 30));//数据2XYChart.Series<Number, Number> series2 = new XYChart.Series();series2.setName("Product 2");series2.getData().add(new XYChart.Data<>(8, 15));series2.getData().add(new XYChart.Data<>(13, 23));series2.getData().add(new XYChart.Data<>(15, 45));series2.getData().add(new XYChart.Data<>(24, 30));series2.getData().add(new XYChart.Data<>(38, 78));series2.getData().add(new XYChart.Data<>(40, 41));series2.getData().add(new XYChart.Data<>(45, 57));series2.getData().add(new XYChart.Data<>(47, 23));bubbleChart.getData().addAll(series1, series2);}}

ScatterChartUtils.java

package chart;

import javafx.scene.chart.NumberAxis;import javafx.scene.chart.ScatterChart;import javafx.scene.chart.XYChart;class ScatterChartUtils{ScatterChart scatterChart;ScatterChartUtils(ScatterChart scatterChart){this.scatterChart = scatterChart;}void operateScatterChart(){//获取两条轴的对象final NumberAxis xAxis = (NumberAxis) scatterChart.getXAxis();final NumberAxis yAxis = (NumberAxis) scatterChart.getYAxis();//设定轴线的名称xAxis.setLabel("时间（单位：年）");yAxis.setLabel("回本");//设定图表的名称scatterChart.setTitle("投资概览");//数据1XYChart.Series<Number, Number> series1 = new XYChart.Series<>();series1.setName("项目1");series1.getData().add(new XYChart.Data<>(4.2, 193.2));series1.getData().add(new XYChart.Data<>(2.8, 33.6));series1.getData().add(new XYChart.Data<>(6.2, 24.8));series1.getData().add(new XYChart.Data<>(1, 14));series1.getData().add(new XYChart.Data<>(1.2, 26.4));series1.getData().add(new XYChart.Data<>(4.4, 114.4));series1.getData().add(new XYChart.Data<>(8.5, 323));series1.getData().add(new XYChart.Data<>(6.9, 289.8));series1.getData().add(new XYChart.Data<>(9.9, 287.1));series1.getData().add(new XYChart.Data<>(0.9, -9));series1.getData().add(new XYChart.Data<>(3.2, 150.8));series1.getData().add(new XYChart.Data<>(4.8, 20.8));series1.getData().add(new XYChart.Data<>(7.3, -42.3));series1.getData().add(new XYChart.Data<>(1.8, 81.4));series1.getData().add(new XYChart.Data<>(7.3, 110.3));series1.getData().add(new XYChart.Data<>(2.7, 41.2));//数据2XYChart.Series<Number, Number> series2 = new XYChart.Series<>();series2.setName("项目2");series2.getData().add(new XYChart.Data<>(5.2, 229.2));series2.getData().add(new XYChart.Data<>(2.4, 37.6));series2.getData().add(new XYChart.Data<>(3.2, 49.8));series2.getData().add(new XYChart.Data<>(1.8, 134));series2.getData().add(new XYChart.Data<>(3.2, 236.2));series2.getData().add(new XYChart.Data<>(7.4, 114.1));series2.getData().add(new XYChart.Data<>(3.5, 323));series2.getData().add(new XYChart.Data<>(9.3, 29.9));series2.getData().add(new XYChart.Data<>(8.1, 287.4));//显示图表scatterChart.getData().addAll(series1, series2);}}

StackedAreaChartUtils.java

package chart;import javafx.scene.chart.CategoryAxis;import javafx.scene.chart.NumberAxis;import javafx.scene.chart.StackedAreaChart;import javafx.scene.chart.XYChart;class StackedAreaChartUtils{private StackedAreaChart stackedAreaChart;StackedAreaChartUtils(StackedAreaChart stackedAreaChart){this.stackedAreaChart = stackedAreaChart;}void operateStackedAreaChart(){//获取两条轴线对象final CategoryAxis xAxis = (CategoryAxis) stackedAreaChart.getXAxis();final NumberAxis yAxis = (NumberAxis) stackedAreaChart.getYAxis();//设定轴线名称xAxis.setLabel("日");yAxis.setLabel("温度");//设置图表标题stackedAreaChart.setTitle("温度监控(单位：°C)");//第一组数据（系列1）XYChart.Series<String, Number> series1 = new XYChart.Series<>();series1.setName("三月");series1.getData().addAll(new XYChart.Data<>("1", 4),new XYChart.Data<>("3", 10),new XYChart.Data<>("6", 15),new XYChart.Data<>("9", 8),new XYChart.Data<>("12", 5),new XYChart.Data<>("15", 18),new XYChart.Data<>("18", 15),new XYChart.Data<>("21", 13),new XYChart.Data<>("24", 19),new XYChart.Data<>("27", 21),new XYChart.Data<>("30", 21));//系列2XYChart.Series<String, Number> series2 = new XYChart.Series<>();series2.setName("五月");series2.getData().addAll(new XYChart.Data<>("1", 20),new XYChart.Data<>("3", 15),new XYChart.Data<>("6", 13),new XYChart.Data<>("9", 12),new XYChart.Data<>("12", 14),new XYChart.Data<>("15", 18),new XYChart.Data<>("18", 25),new XYChart.Data<>("21", 25),new XYChart.Data<>("24", 23),new XYChart.Data<>("27", 26),new XYChart.Data<>("31", 26));//显示图表stackedAreaChart.getData().addAll(series1, series2);}}

StackedBarChartUtils.java

package chart;import javafx.scene.chart.CategoryAxis;import javafx.scene.chart.NumberAxis;import javafx.scene.chart.StackedBarChart;import javafx.scene.chart.XYChart;class StackedBarChartUtils{StackedBarChart stackedBarChart;StackedBarChartUtils(StackedBarChart stackedBarChart){this.stackedBarChart = stackedBarChart;}void operateStackedBarChart(){final String austria = "Austria";final String brazil = "Brazil";final String france = "France";final String italy = "Italy";final String usa = "USA";//获取两条轴的对象CategoryAxis xAxis = (CategoryAxis) stackedBarChart.getXAxis();NumberAxis yAxis = (NumberAxis) stackedBarChart.getYAxis();//设定轴线的名称xAxis.setLabel("国家");yAxis.setLabel("数值");final XYChart.Series<String, Number> series1 = new XYChart.Series<>();series1.setName("");series1.getData().add(new XYChart.Data<>(austria, 25601.34));series1.getData().add(new XYChart.Data<>(brazil, 8.82));series1.getData().add(new XYChart.Data<>(france, 10000));series1.getData().add(new XYChart.Data<>(italy, 35407.15));series1.getData().add(new XYChart.Data<>(usa, 12000));final XYChart.Series<String, Number> series2 = new XYChart.Series<>();series2.setName("");series2.getData().add(new XYChart.Data<>(austria, 57401.85));series2.getData().add(new XYChart.Data<>(brazil, 41941.19));series2.getData().add(new XYChart.Data<>(france, 45263.37));series2.getData().add(new XYChart.Data<>(italy, 117320.16));series2.getData().add(new XYChart.Data<>(usa, 14845.27));final XYChart.Series<String, Number> series3 = new XYChart.Series<>();series3.setName("");series3.getData().add(new XYChart.Data<>(austria, 45000.65));series3.getData().add(new XYChart.Data<>(brazil, 44835.76));series3.getData().add(new XYChart.Data<>(france, 18722.18));series3.getData().add(new XYChart.Data<>(italy, 17557.31));series3.getData().add(new XYChart.Data<>(usa, 92633.68));//显示图表stackedBarChart.getData().addAll(series1, series2, series3);}}

main_view.fxml

<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.chart.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?><Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="484.0"prefWidth="797.0" xmlns="/javafx/8.0.221" stylesheets="@style/style.css"><TabPane id="tabPane" prefHeight="484.0" prefWidth="797.0" tabClosingPolicy="UNAVAILABLE"><Tab text=" 扇形图" id="pieChartTab" ><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="364.0" prefWidth="797.0"><PieChart id="pieChart" layoutX="265.0" layoutY="15.0" prefWidth="250.0"/></AnchorPane></Tab><Tab text=" 柱状图" id="barChartTab"><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><BarChart id="barChart" layoutX="140.0" layoutY="15.0"><xAxis><CategoryAxis side="BOTTOM"/></xAxis><yAxis><NumberAxis side="LEFT"/></yAxis></BarChart></AnchorPane></Tab><Tab text=" 折线图" id="lineChartTab"><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><LineChart id="lineChart" layoutX="140.0" layoutY="15.0"><xAxis><CategoryAxis side="BOTTOM"/></xAxis><yAxis><NumberAxis side="LEFT"/></yAxis></LineChart></AnchorPane></Tab><Tab text=" 面积图" id="areaChartTab"><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><AreaChart id="areaChart" layoutX="140.0" layoutY="15.0"><xAxis><CategoryAxis side="BOTTOM"/></xAxis><yAxis><NumberAxis side="LEFT"/></yAxis></AreaChart></AnchorPane></Tab><Tab text=" 气泡图" id="bubbleChartTab"><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><BubbleChart id="bubbleChart" layoutX="140.0" layoutY="15.0"><xAxis><NumberAxis side="BOTTOM"/></xAxis><yAxis><NumberAxis side="LEFT"/></yAxis></BubbleChart></AnchorPane></Tab><Tab text=" 散布图" id="scatterChartTab"><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><ScatterChart id="scatterChart" layoutX="140.0" layoutY="15.0"><xAxis><NumberAxis side="BOTTOM"/></xAxis><yAxis><NumberAxis side="LEFT"/></yAxis></ScatterChart></AnchorPane></Tab><Tab text=" 堆叠面积图" id="stackedAreaChartTab"><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><StackedAreaChart id="stackedAreaChart" layoutX="140.0" layoutY="15.0"><xAxis><CategoryAxis side="BOTTOM"/></xAxis><yAxis><NumberAxis side="LEFT"/></yAxis></StackedAreaChart></AnchorPane></Tab><Tab text=" 堆叠柱状图" id="stackedBarChartTab"><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><StackedBarChart id="stackedBarChart" layoutX="140.0" layoutY="15.0"><xAxis><CategoryAxis side="BOTTOM"/></xAxis><yAxis><NumberAxis side="LEFT"/></yAxis></StackedBarChart></AnchorPane></Tab></TabPane></Pane>

style.css

.root {-fx-font-family: Consolas, Herculanum, serif;}/* 修改图例的背景颜色和边框样式 */.chart-legend {-fx-border-color: #333333;-fx-border-radius: 3px;}/*修改图例中的文本颜色*/.chart-legend .label {-fx-text-fill: #333333;}/* 修改图标标题的字体样式 */.chart-title {-fx-text-fill: #333333;}.chart-pie-label, .chart-bar-label {-fx-text-fill: #333333;}/* 改变柱图表数据节点的颜色 */.chart-bar, #lineChart, #areaChart, #stackedAreaChart, #bubbleChart, #scatterChart, #stackedBarChart {CHART_COLOR_1: darkred;CHART_COLOR_2: darkgreen;CHART_COLOR_3: #01ff;CHART_COLOR_4: #330033ff;CHART_COLOR_5: #bec100ff;CHART_COLOR_6: #00a8a0ff;CHART_COLOR_7: #80334dff;CHART_COLOR_8: #ffccb3ff}.chart-bubble .label {-fx-text-fill: red;}/* 改变x和y轴上面数值标示的颜色 */.axis {/* 改变x和y轴数值标示的字体颜色 */-fx-tick-label-fill: #1a1a1aff;/* 改变x和y轴数值标示的字体类型和大小 */-fx-tick-label-font: 9px Consolas;}/* 改变x和y轴名字的颜色 */.axis-label {-fx-text-fill: #990000ff;-fx-font-family: Consolas, "宋体", serif;}/* 修改tab的背景颜色和字体 */.tab {-fx-background-color: white;-fx-font-family: Consolas, "宋体", serif;}/* 为Tab插入背景图片作为logo */#lineChartTab {-fx-background-image: url('../icons/line_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}/* 为Tab插入背景图片作为logo */#pieChartTab {-fx-background-image: url('../icons/pie_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}/* 为Tab插入背景图片作为logo */#barChartTab {-fx-background-image: url('../icons/bar_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}/* 为Tab插入背景图片作为logo */#areaChartTab {-fx-background-image: url('../icons/area_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}/* 为Tab插入背景图片作为logo */#bubbleChartTab {-fx-background-image: url('../icons/bubble_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}/* 为Tab插入背景图片作为logo */#scatterChartTab {-fx-background-image: url('../icons/scatter_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}/* 为Tab插入背景图片作为logo */#stackedAreaChartTab {-fx-background-image: url('../icons/stacked_area_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}/* 为Tab插入背景图片作为logo */#stackedBarChartTab {-fx-background-image: url('../icons/stacked_bar_chart.png');-fx-background-size: 20px 20px;-fx-background-position: 5px center;-fx-background-repeat: no-repeat;}.tab-pane {-fx-background-color: #ddddddff;}/* 子代选择器，Tab选中的时候修改Tab字体样式。 */.tab:selected .tab-label {-fx-text-fill: darkred;}/* Tab选中的时候选中其边框并修改样式 */.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {-fx-border-radius: 0px;-fx-border-width: 1px 1px 1px 1px;-fx-border-color: #e6e6e6;}

程序中使用到的图片素材

pie_chart.png

bar_chart.png

line_chart.png

area_chart.png

bubble_chart.png

scatter_chart.png

stacked_bar_chart.png

stacked_area_chart.png

javafx最全图表教程（包含扇形图 柱状图 折线图 面积图 气泡图 散布图 堆叠面积图 堆叠柱状图）