Phần 4 : Biểu đồ
I. Pie Chart :
1. Tạo Pie Chart :
2. Một số phương thức dành cho PieChart.Data:
kiểu trả về
|
Phương thức
|
Miêu tả
|
PieChart
|
getChart()
|
Trả về 1 PieChart đang chứa PieChart.Data này.
|
String
|
getName()
|
Trả về thành phần name của PieChart.Data
|
double
|
getPieValue( )
|
Trả về thành phần value của PieChart.Data
|
void
|
setName(String value)
|
Thiết lập giá trị cho thành phần name của PieChart.Data
|
void
|
setPieValue(double value)
|
Thiết lập giá trị cho thành phần value của PieChart.Data
|
Node
|
getNode()
|
Trả
về Node là thành phần được sử dụng để hiển thị dữ liệu của
PieChart.Data. Bạn có thể sử dụng phương thức này để tạo mouse click
event khi click vào một PieChart.Data .
|
3. Một số phương thức dành cho PieChart:
kiểu trả về
|
Phương thức
|
Miêu tả
|
ObservableList
<PieChart.Data>
|
getData()
|
Trả về đối tượng ObservableList mà chứa tất cả dữ liệu của PieChart.
|
void
|
setClockwise(boolean value )
|
Value = true, dữ liệu được xếp theo chiều kim đồng hồ, value= false, dữ liệu xếp theo chiều ngược kim đồng hồ.
|
void
|
setData(ObservableList
<PieChart.Data>)
|
Thiết lập dữ liệu cho PieChart.
|
void
|
setLabelLineLength( double value)
|
Thiết lập khoảng cách giữa viền của pie chart đến thành phần name của PieChart.Data
|
void
|
setLabelsVisible(boolen value)
|
Hiển thị hoặc ẩn thành phần name của PieChart.Data.
|
void
|
setStartAngle( double value)
|
Góc (so với chiều ngang) để bắt đầu đặt dữ liệu đầu tiên.
|
void
|
setTitle(String value)
|
Tiêu đề của Pie chart.
|
void
|
setLegendSide(Side value)
|
thiết lập vị trí của thanh chú giải
Vd: chart.setLegendSide(Side.TOP);
|
void
|
setLegendVisible(boolen value)
|
Hiện hoặc ẩn thanh chú giải.
|
II. Line Chart :
1. Tạo Line Chart :
Để tạo 1 Line Chart, chúng ta lần lượt thực hiện từng bước sau:
a. Định nghĩa trục X và trục Y :
b. Định nghĩa dữ liệu :
c. Định nghĩa LineChart:
2. Một số phương thức dành cho Axis (bao gồm CategoryAxis và NumberAxis):
kiểu trả về
|
Phương thức
|
Miêu tả
|
void
|
setLabel(String value)
|
Thiết lập label cho Axis
|
void
|
setSide(Side value)
|
Thiết lập vị trí cho Axis
Vd: xAxis.setSide(Side.TOP);
|
void
|
setTickLabelRotation(double value )
|
Xoay theo góc value các ticklabel trên 1 trục.
|
void
|
setTickLabelVisible( boolean value)
|
Hiện hoặc ẩn ticklabel.
|
void
|
setTickLength(double value )
|
Thiết lập khoảng cách từ trục đến ticklabel.
|
void
|
setTickMarkVisible( boolean value)
|
Hiện hoặc ẩn tickmark.
|
Một số phương thức dành riêng cho CategoryAxis:
kiểu trả về
|
Phương thức
|
Miêu tả
|
void
|
setCategories( ObservaleList<String> value)
|
Tạo ticklabel cho Axis.
Vd: xAxis.setCategories(
FXCollections.observableArrayList(
"Jan","Feb","Mar",”Apr”
));
|
void
|
setStartMagin(double value)
|
Thiết lập khoảng cách trống từ điểm bắt đầu của trục đến tickmark đầu tiên
|
void
|
setEndMagin(double value)
|
Thiết lập hiển thị khoảng trống từ tickmark cuối cùng của trục.
|
void
|
setTickLabelVisible( boolean value)
|
Hiện hoặc ẩn các nhãn trên 1 trục.
|
void
|
setTickLength(double value )
|
Thiết lập khoảng cách từ trục đến nhãn của trục.
|
3. Một số phương thức dành XYChart.Series:
XYChart.Series là 1 mảng chứa các phần tử là đối tượng XYChart.Data
kiểu trả về
|
Phương thức
|
Miêu tả
|
XYChart <X, Y>
|
getChart()
|
Trả về biểu đồ đang chứa đối tượng XYChart.Series này .
|
ObservableList
<XYChart.Data>
|
setData()
|
Trả về tất cả các phần tử XYChart.Data có trong XYChart.Series, các phần tử này được lưu trong đối tượng ObservableList.
|
void
|
setName( double value )
|
Thiết lập tên cho XYChart.Series.
|
4. Một số phương thức dành XYChart.Data:
XYChart.Data là phần tử chứa dữ liệu dành cho các biểu đồ có 2 trục.
kiểu trả về
|
Phương thức
|
Miêu tả
|
X
|
getXValue()
|
Lấy giá trị nằm trên trục X của XYChart.Data
|
Y
|
getYValue()
|
Lấy giá trị nằm trên trục Y của XYChart.Data
|
void
|
setXValue(X value )
|
Thiết lập giá trị trên trục X của XYChart.Data
|
void
|
setYValue(X value )
|
Thiết lập giá trị trên trục Y của XYChart.Data
|
Node
|
getNode()
|
Trả
về Node là thành phần được sử dụng để hiển thị dữ liệu của
XYChart.Data. Bạn có thể sử dụng phương thức này để tạo mouse click
event khi click vào một XYChart.Data .
|
5. Một số phương thức dành LineChart:
kiểu trả về
|
Phương thức
|
Miêu tả
|
ObservableList
<XYChart.Series<X.Y>>
|
getData()
|
Trả
về đối tượng ObservableList chứa tất cả các đối tượng XYChart.Series .
Dựa vào Observable này, chúng ta có thể thực hiện nhiều hành động về
XYChart.Series như sau:
- Thêm 1 XYChart.Series
Vd : chart.getData().add(….)
- Thêm nhiều XYChart.Series
Vd : chart.getData().add(…,..,...)
- Xóa 1 XYChart.Series
Vd : chart.getData().remove(1)
….
|
void
|
setData( ObservableList <XYChart.Series> value )
|
Sử dụng value và xóa tất cả các đối tượng XYChart.Series tồn tại trước đó.
Vd:
chart.setData( FXCollections.observableArrayList(series));
|
void
|
setHorizontalGridLineVisible( boolean value )
|
Hiện hoặc ẩn cácđường kẻ ngang trong biểu đồ
|
void
|
setVertictalGridLineVisible
( boolean value )
|
Hiện hoặc ẩn cácđường kẻ dọc trong biểu đồ
|
void
|
setHorizontalZeroLineVisible( boolean value )
|
Hiện hoặc ẩn 1 đường kẻ ngang tại vị trí 0, nếu vị trí trục X là TOP
|
void
|
setVertictalGridLineVisible( boolean value )
|
Hiện hoặc ẩn cácđường kẻ dọc tại vị trí 0, nếu vị trí trục Y là RIGHT.
|
void
|
setTitle(String value)
|
Thiết lập tiêu đề cho LineChart.
|
6. Ví dụ :
Tạo ra 2 biểu đồ PieChart và LineChart :
public class ExampleLineChart extends Application {
// label hiển thị giá trị dữ liệu
Label caption = new Label("");
public void start(Stage primaryStage) {
// ---------------tạo PIE CHART--------------------------
// dữ liệu của PieChart
PieChart.Data dataCar = new PieChart.Data("Car", 8);
PieChart.Data dataBus = new PieChart.Data("Bus", 25);
PieChart.Data dataCycle = new PieChart.Data("Cycle", 55);
PieChart.Data dataWalk = new PieChart.Data("Walk", 5);
PieChart.Data dataTaxi = new PieChart.Data("Taxi", 2);
ObservableList<PieChart.Data> list = FXCollections.observableArrayList(
dataCar, dataBus, dataCycle, dataWalk, dataTaxi
);
PieChart piechart = new PieChart(list);
piechart.setTitle("Pie chart");
// tạo mouse click event khi click vào vùng dữ liệu
for (PieChart.Data data : piechart.getData()) {
data.getNode().addEventHandler(MouseEvent.MOUSE_PRESSED,
new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
caption.setTranslateX(e.getSceneX());
caption.setTranslateY(e.getSceneY());
caption.setScaleX(3);
caption.setText(String.valueOf(data.getPieValue()) + "%");
}
});
}
//----------------- LINE CHART------------------------------
CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("monthly turnover of XYZ");
NumberAxis yAxis = new NumberAxis();
LineChart linechart = new LineChart(xAxis, yAxis);
XYChart.Series seriesHCM = new XYChart.Series();
seriesHCM.getData().add(new XYChart.Data<>("Jan", 25));
seriesHCM.getData().add(new XYChart.Data<>("Feb", 23));
seriesHCM.getData().add(new XYChart.Data<>("Mar", 20));
seriesHCM.getData().add(new XYChart.Data<>("Apr", 13));
seriesHCM.getData().add(new XYChart.Data<>("May", 18));
seriesHCM.getData().add(new XYChart.Data<>("Jun", 22));
seriesHCM.getData().add(new XYChart.Data<>("Jul", 25));
seriesHCM.getData().add(new XYChart.Data<>("Aug", 23));
seriesHCM.getData().add(new XYChart.Data<>("Sep", 20));
seriesHCM.getData().add(new XYChart.Data<>("Oct", 13));
seriesHCM.getData().add(new XYChart.Data<>("Nov", 29));
seriesHCM.getData().add(new XYChart.Data<>("Dec", 22));
seriesHCM.setName("Ho Chi Minh city");
XYChart.Series seriesHN = new XYChart.Series();
seriesHN.getData().add(new XYChart.Data<>("Jan", 15));
seriesHN.getData().add(new XYChart.Data<>("Feb", 13));
seriesHN.getData().add(new XYChart.Data<>("Mar", 20));
seriesHN.getData().add(new XYChart.Data<>("Apr", 10));
seriesHN.getData().add(new XYChart.Data<>("May", 15));
seriesHN.getData().add(new XYChart.Data<>("Jun", 12));
seriesHN.getData().add(new XYChart.Data<>("Jul", 15));
seriesHN.getData().add(new XYChart.Data<>("Aug", 13));
seriesHN.getData().add(new XYChart.Data<>("Sep", 10));
seriesHN.getData().add(new XYChart.Data<>("Oct", 13));
seriesHN.getData().add(new XYChart.Data<>("Nov", 19));
seriesHN.getData().add(new XYChart.Data<>("Dec", 12));
seriesHN.setName("Ha Noi city");
linechart.getData().add(seriesHCM);
linechart.getData().add(seriesHN);
linechart.setTitle("Line Chart");
for (int k = 0; k < linechart.getData().size(); k++) {
XYChart.Series series = (XYChart.Series) linechart.getData().get(k);
for (int i = 0; i < series.getData().size(); i++) {
XYChart.Data data = (XYChart.Data) series.getData().get(i);
data.getNode().addEventHandler(MouseEvent.MOUSE_PRESSED,
new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
caption.setTranslateX(e.getSceneX());
caption.setTranslateY(e.getSceneY());
caption.setScaleX(3);
caption.setText(String.valueOf(data.getYValue()));
}
});
}
}
HBox hBox = new HBox(linechart, piechart);
Group root = new Group();
root.getChildren().add(hBox);
root.getChildren().add(caption);
Scene scene = new Scene(root, 400, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
|
Không có nhận xét nào:
Đăng nhận xét