javafx表控件展示数据 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";
        //系列1
        XYChart.Series<String, Double> series1 = new XYChart.Series<>();
        series1.setName("2003");
        series1.getData().add(new XYChart.Data<>(austria, 25601.34));
        series1.getData().add(new XYChart.Data<>(brazil, 20148.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));
        //系列2
        XYChart.Series<String , Double> series2 = new XYChart.Series<>();
        series2.setName("2004");
        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));
        //系列3
        XYChart.Series<String, Double> series3 = new XYChart.Series<>();
        series3.setName("2005");
        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("2010年股票监控");

        //系列1
        XYChart.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));

        //系列2
        XYChart.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));

        //系列3
        XYChart.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("2010年股票监控");

        //系列1
        XYChart.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));

        //系列2
        XYChart.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));

        //系列3
        XYChart.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("预算监控");

        //数据1
        XYChart.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));

        //数据2
        XYChart.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("投资概览");

        //数据1
        XYChart.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));

        //数据2
        XYChart.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)
        );
        //系列2
        XYChart.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("2003");
        series1.getData().add(new XYChart.Data<>(austria, 25601.34));
        series1.getData().add(new XYChart.Data<>(brazil, 20148.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("2004");
        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("2005");
        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="http://javafx.com/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: #020081ff;
    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