注意：本文的Javafx应用是采用fxml布局，Java写业务逻辑的。
实现效果
Main.java
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();//折线图LineChart lineChart = (LineChart)root.lookup("#lineChart");LineChartUtils lineChartUtils = new LineChartUtils(lineChart);lineChartUtils.operateLineChart();primaryStage.setTitle("图表Chart");primaryStage.setScene(new Scene(root, 797, 484));primaryStage.show();}}
BarChartUtils.java
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);}}
PieChartUtils.java
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");}}
LineChartUtils.java
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);}}
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 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 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 layoutX="140.0" layoutY="15.0"><xAxis><CategoryAxis 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 layoutX="140.0" layoutY="15.0"><xAxis><NumberAxis 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 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 {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}/* 改变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;}
