首页 > 编程语言 >JavaFX 常见图表组件

JavaFX 常见图表组件

时间：2024-06-04 14:33:02浏览次数：31  
标签：XYChart javafx JavaFX scene 图表 add new 组件 import

图表组件简介

JavaFX 提供了一系列的图表组件，允许开发者在应用程序中轻松集成各种图表和图形。

名称 中文 描述
BarChart 条形图 用于显示条形图，条形图通过水平或垂直的条形来表示数据的大小
PieChart 饼图 用于创建饼图，饼图通过不同扇区的角度来展示数据的比例关系
LineChart 折线图 用于绘制折线图，折线图通过折线连接各个数据点，展示数据随时间或其他序列变化的趋势
AreaChart 面积图 类似于折线图，但在折线下方的区域会被填充颜色或纹理，用于展示量的变化
ScatterChart 散点图 用于显示散点图，散点图通过在坐标系中绘制数据点来展示两个变量之间的关系
BubbleChart 气泡图 是散点图的一种变体，数据点被气泡代替，气泡的大小可以表示第三个数值变量的大小。
StackedBarChart 堆叠条形图 条形图的变体，不同的条形可以堆叠起来，表示各个部分对总量的贡献。

图表组件使用

BarChart（条形图）

用于显示条形图的控件，它通过水平或垂直的条形来展示数据的大小，使得数据比较直观易懂

特性：

  1. 双向条形：可以设置为水平条形图或垂直条形图。
  2. 轴：包含两个轴，通常一个是类别轴（用于分类数据），另一个是数值轴（用于度量数据）。
  3. 数据系列：可以包含一个或多个数据系列，每个系列可以有自己的颜色或样式。
  4. 动态数据：支持动态修改数据，图表会自动更新显示。
  5. 交互性：可以添加交互功能，如点击或悬停事件，以提供更多信息。
  6. 样式定制：可以使用 CSS 来改变条形图的外观。

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.chart.XYChart;

public class BarChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        CategoryAxis xAxis = new CategoryAxis(); // X轴用于分类，使用CategoryAxis
        NumberAxis yAxis = new NumberAxis();     // Y轴用于数值，使用NumberAxis

        // 创建水平条形图
        BarChart<String, Number> barChart = new BarChart<>(xAxis,yAxis);

        // 设置轴的名称
        barChart.getXAxis().setLabel("Category");
        barChart.getYAxis().setLabel("Value");

        // 创建数据系列
        XYChart.Series<String, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>("Item 1", 3));
        series.getData().add(new XYChart.Data<>("Item 2", 7));
        series.getData().add(new XYChart.Data<>("Item 3", 2));

        // 将数据系列添加到条形图中
        barChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(barChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("BarChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
PieChart（饼图）

用于显示饼图的控件，它通过不同扇区的角度来展示数据的比例关系

特性：

  1. 数据比例展示：通过扇区的角度大小来表示数据的比例。
  2. 环形图：可以设置饼图为环形，即每个扇区之间有空隙。
  3. 数据标签：可以为每个扇区添加标签，显示额外的信息。
  4. 交互性：支持鼠标悬停和点击事件，用于展示更多数据详情。
  5. 样式定制：可以使用 CSS 来改变饼图的外观，如扇区的颜色、标签的样式等。

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 * PieChart 饼图示例
 */
public class PieChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建饼图
        PieChart pieChart = new PieChart();

        // 创建数据系列并添加数据点
        PieChart.Data data1 = new PieChart.Data("Item 1", 20);
        PieChart.Data data2 = new PieChart.Data("Item 2", 30);
        PieChart.Data data3 = new PieChart.Data("Item 3", 50);

        // 将数据系列添加到饼图中
        pieChart.getData().add(data1);
        pieChart.getData().add(data2);
        pieChart.getData().add(data3);

        // 创建布局并添加饼图
        StackPane root = new StackPane();
        root.getChildren().add(pieChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("PieChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
LineChart（折线图）

用于显示折线图的控件，它通过折线连接各个数据点，展示数据随时间或其他序列变化的趋势

特性：

  1. 时间序列展示：适合展示随时间变化的数据。
  2. 多系列数据：可以在同一个图表中展示多个数据系列。
  3. 轴：包含两个轴，通常 X 轴是类别轴（用于分类或时间序列），Y 轴是数值轴（用于度量数据）。
  4. 动画：数据点和线条可以动画显示。
  5. 交互性：支持鼠标滚轮缩放、拖动平移等交互操作。
  6. 样式定制：可以使用 CSS 来改变折线图的外观，如线条颜色、数据点样式等。

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class LineChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建折线图实例
        LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>(1, 10));
        series.getData().add(new XYChart.Data<>(2, 15));
        series.getData().add(new XYChart.Data<>(3, 7));
        series.getData().add(new XYChart.Data<>(4, 20));

        // 将数据系列添加到折线图中
        lineChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(lineChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("LineChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
AreaChart（面积图）

用于显示面积图的控件，它通过在折线下方的区域内填充颜色或纹理来展示数据随时间或其他序列变化的趋势。面积图通常用于展示量随时间的累积效应，或者比较多个数据序列的变化趋势。

特性：

  1. 累积量展示：面积图通过填充颜色来表示数据随时间累积的效果。
  2. 多系列数据：可以在同一个图表中展示多个数据系列，每个系列可以有不同的填充颜色。
  3. 轴：包含两个轴，通常 X 轴是类别轴或时间轴，Y 轴是数值轴。
  4. 动画：数据点和面积可以动画显示。
  5. 交互性：支持鼠标滚轮缩放、拖动平移等交互操作。
  6. 样式定制：可以使用 CSS 来改变面积图的外观，如填充颜色、线条样式等。

案例演示

package com.binge.javafxdemo.chart;

/**
 * AreaChartExample 示例
 */
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class AreaChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建面积图实例
        AreaChart<Number, Number> areaChart = new AreaChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>(1, 100));
        series.getData().add(new XYChart.Data<>(2, 250));
        series.getData().add(new XYChart.Data<>(3, 170));
        series.getData().add(new XYChart.Data<>(4, 400));

        // 将数据系列添加到面积图中
        areaChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(areaChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("AreaChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
ScatterChart（散点图）

用于显示散点图的控件，它通过在坐标系中绘制数据点来展示两个变量之间的关系。散点图通常用于展示数据的分布情况，分析变量之间的相关性。

特性：

  1. 数据分布展示：通过在坐标系中绘制数据点来展示数据的分布。
  2. 双轴支持：可以为 X 轴和 Y 轴设置不同的度量单位，适用于不同量纲的数据。
  3. 多系列数据：可以在同一个图表中展示多个数据系列，每个系列可以有不同的样式和颜色。
  4. 交互性：支持鼠标悬停以显示数据点的详细信息，支持点击事件。
  5. 动画：数据点可以动画显示。
  6. 样式定制：可以使用 CSS 来改变散点图的外观，如数据点的标记形状、颜色等。

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 * ScatterChartExample 散点图示例
 */
public class ScatterChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建散点图实例
        ScatterChart<Number, Number> scatterChart = new ScatterChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>(10, 20));
        series.getData().add(new XYChart.Data<>(15, 30));
        series.getData().add(new XYChart.Data<>(25, 10));
        series.getData().add(new XYChart.Data<>(30, 45));

        // 将数据系列添加到散点图中
        scatterChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(scatterChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("ScatterChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
BubbleChart（气泡图）

用于显示气泡图的控件，它是散点图（ScatterChart）的一个变体。在气泡图中，除了在坐标系中通过 (x, y) 坐标点展示数据之外，每个数据点的大小也代表了第三个数值变量的大小，这个大小通过气泡的直径来表示。这使得气泡图能够展示三个数值变量之间的关系。

特性：

  1. 三维数据展示：通过 x、y 坐标点的位置和气泡的大小来展示数据。
  2. 数据点大小：气泡的大小可以表示数据点的第三个数值维度。
  3. 轴：包含两个轴，通常 X 轴和 Y 轴都是数值轴。
  4. 交互性：支持鼠标悬停以显示数据点的详细信息，支持点击事件。
  5. 动画：数据点可以动画显示。
  6. 样式定制：可以使用 CSS 来改变气泡图的外观，如气泡的颜色、边框等。

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BubbleChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 * BubbleChartExample 气泡图示例
 */
public class BubbleChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建气泡图实例
        BubbleChart<Number, Number> bubbleChart = new BubbleChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点，设置气泡大小
        series.getData().add(new XYChart.Data<>(1, 2, 10)); // x, y, bubble size
        series.getData().add(new XYChart.Data<>(2, 3, 20));
        series.getData().add(new XYChart.Data<>(3, 4, 15));

        // 将数据系列添加到气泡图中
        bubbleChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(bubbleChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("BubbleChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
StackedBarChart（堆叠图）

用于显示堆叠条形图的控件，它将多个条形堆叠在一起，每个条形由多个矩形组成，每个矩形代表一个数据系列的数值部分。堆叠条形图通常用于展示各部分对总量的贡献以及不同类别间的比较。

特性：

  1. 数据累加展示：通过堆叠的条形展示每个类别的总量和各部分的数值贡献。
  2. 多系列数据：可以在同一个条形中展示多个数据系列，每个系列用不同的颜色表示。
  3. 轴：包含两个轴，通常 X 轴是类别轴，Y 轴是数值轴。
  4. 交互性：支持鼠标悬停以显示数据点的详细信息，支持点击事件。
  5. 动画：条形和数据系列可以动画显示。
  6. 样式定制：可以使用 CSS 来改变堆叠条形图的外观，如条形的颜色、边框等

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.StackedBarChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
 * StackedBarChartExample 堆叠图示例
 */
public class StackedBarChartExample extends Application {

    @Override
    public void start(Stage stage) {
        // 创建X轴和Y轴
        CategoryAxis xAxis = new CategoryAxis();
        xAxis.setLabel("Category");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Value");

        // 创建堆叠条形图
        StackedBarChart<String, Number> stackedBarChart = new StackedBarChart<>(xAxis, yAxis);
        stackedBarChart.setTitle("Stacked Bar Chart Example");

        // 创建系列数据
        XYChart.Series<String, Number> series1 = new XYChart.Series<>();
        series1.setName("Series 1");
        series1.getData().add(new XYChart.Data<>("A", 30));
        series1.getData().add(new XYChart.Data<>("B", 50));
        series1.getData().add(new XYChart.Data<>("C", 70));

        XYChart.Series<String, Number> series2 = new XYChart.Series<>();
        series2.setName("Series 2");
        series2.getData().add(new XYChart.Data<>("A", 40));
        series2.getData().add(new XYChart.Data<>("B", 60));
        series2.getData().add(new XYChart.Data<>("C", 80));

        XYChart.Series<String, Number> series3 = new XYChart.Series<>();
        series3.setName("Series 3");
        series3.getData().add(new XYChart.Data<>("A", 50));
        series3.getData().add(new XYChart.Data<>("B", 70));
        series3.getData().add(new XYChart.Data<>("C", 90));

        // 将系列数据添加到堆叠条形图
        stackedBarChart.getData().addAll(series1, series2, series3);

        // 创建场景并设置舞台
        Scene scene = new Scene(stackedBarChart, 800, 600);
        stage.setScene(scene);
        stage.setTitle("JavaFX Stacked Bar Chart Example");
        stage.show();
    }

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

标签：XYChart,javafx,JavaFX,scene,图表,add,new,组件,import
From： https://www.cnblogs.com/binbingg/p/18230691

相关文章

  • JavaFX 常见事件类型及事件处理
    什么是事件驱动编程事件驱动编程是一种编程范式，其中程序的执行流程是由外部事件（如用户输入、传感器读数、消息接收等）触发的。在这种模式下，程序不是按照预定的顺序执行，而是响应事件来执行代码。这种编程方式在需要处理异步操作或与用户交互的应用程序中非常常见。事件驱动编程广......
  • Vue实现动态组件
    使用场景：同一个区域因状态不同或者tab页，展示给用户不同模版样式逻辑的组件动态组件实现，是通过使用 is attribute来切换不同的组件<componentv-bind:is="currentTabComponent"></component> 一、公共动态组件父组件（可以通过keep-alive缓存）<!--公共动态组件isComp......
  • Vue3-组件通信详解
    文章目录组件通信的含义Vue3组件通信和Vue2的区别组件通信的具体实现props（父子组件通信）自定义事件（子传父）mitt（任意组件间通信）v-model$attrs（非props的父子组件通信）r......
  • JavaFX 常见UI控件使用
    UI控件介绍JavaFX提供了一套丰富的用户界面控件，这些控件可以用来创建现代的、交互式的图形用户界面（GUI）。JavaFX控件是JavaFX库中预定义的组件，它们封装了创建用户界面元素的复杂性，使得开发者可以快速地构建应用程序界面。以下是一些常见的JavaFX控件：控件名说明L......
  • 用 python 绘制不同时间序列数据的图表
    我有两个不同的时间序列数据，如下所示。我希望将这两组不同的时间序列值放在一个图表中。代码如下，不幸的是，这并不是我想要的效果。第二张图片就是我想要的效果......
  • JavaFX 常见布局组件的使用
    Laytout简介JavaFX提供了多种布局管理器（LayoutManagers），它们用于自动管理用户界面组件的位置和大小。布局管理器可以简化UI设计，因为它们会根据窗口的大小变化自动调整其中的组件。布局组件JavaFX包含以下布局组件：布局名称中文说明AnchorPane锚点布局允许开发......
  • pinia之Vue 的存储库,案例：允许跨组件/页面共享状态--传值
    pinia之Vue的存储库,案例：允许跨组件/页面共享状态--传值第⼀步：npminstallpinia第⼆步：操作src/main.tsimport{createApp}from'vue'importAppfrom'./App.vue'/*引⼊createPinia，⽤于创建pinia*/import{createPinia}from'pinia'/*创建pinia*/con......
  • 界面控件DevExpress WinForms的流程图组件 - 可完美复制Visio功能（二）
    DevExpressWinForms的Diagram（流程图）组件允许您复制MicrosoftVisio中的许多功能，并能在下一个WindowsForms项目中引入信息丰富的图表、流程图和组织图。P.S：DevExpressWinForms拥有180+组件和UI库，能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美......
  • BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式
    目录 一、Glyphicons字体图标二、下拉菜单1.基本实例1.1示例1.2用jQuery实现1.3菜单向上弹出2.对齐3.标题4.分割线5.禁用的菜单项三、按钮组1.基本实例2.按钮工具栏3.尺寸4.嵌套5.垂直排列6.两端对齐排列的按钮组四、按钮式下拉菜单1.单按......
  • BootStrap入门到实战：BootStrap组件（二）- 输入框组、导航、导航条、路径导航（面包屑效果）
    目录一、输入框组1.基本实例2.尺寸3.作为额外元素的多选框和单选框4.作为额外元素的按钮5.作为额外元素的按钮式下拉菜单6.作为额外元素的分裂式按钮下拉菜单二、导航1.标签页2.胶囊式标签页3.两端对齐的标签页4.禁用的链接5.添加下拉菜单三、导航条......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99