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

最新推荐文章于 2023-11-07 20:15:00 发布

qq_37415866

最新推荐文章于 2023-11-07 20:15:00 发布

阅读量3.3k

点赞数 4

文章标签： javafx 图表

本文链接：https://blog.csdn.net/qq_37415866/article/details/103016313

版权

注意：本文中的项目运行环境为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`

在这里插入图片描述

qq_37415866

关注

4
点赞
踩
41

收藏

觉得还不错? 一键收藏
2
评论
javafx最全图表教程（包含扇形图、柱状图、折线图、面积图、气泡图、散布图、堆叠面积图、堆叠柱状图）

最终实现效果扇形图预览柱状图预览折线图预览面积图预览气泡图预览散布图预览堆叠面积图预览堆叠柱状图预览说明：整体程序由三部分组成：java 源码、fxml文件和css文件。下面是项目结构图：Main.javapackage chart;import javafx.application.Application;import javafx.fxml.FXM...
复制链接

扫一扫