top

JavaFX 2 Charts Part 3

分享:

JavaFX 2 Charts Part 2 << 前情

在前兩篇文章「JavaFX 2 Charts Part 1」和「JavaFX 2 Charts Part 2」,介紹四種基本的圖表元件,你已經瞭解如何在JavaFX應用程式中加入和設定需要的圖表元件。圖表元件的最後一篇文章,會討論把JavaFX 2的CSS技術套用到圖表元件,讓它們的樣式變的清楚、獨特和美觀。這篇文章的範例使用條狀圖說明,不過你同樣可以把它套用在其它任何JavaFX 2內建的圖表元件。

你可以先建立一個在「JavaFX 2 Charts Part 1」中介紹的應用程式,它包含一個測試的條狀圖表元件。接下來建立一個設定樣式用的CSS檔案,在裡面加入一些基本的樣式設定:

/* 設定整個圖表的邊界和背景顏色 */
.chart {
    -fx-padding: 10px;
    -fx-background-color: #A36617;
}

/* 設定圖表內容的邊界 */
.chart-content {
    -fx-padding: 30;
}

/* 設定圖表說明的背景顏色和邊界 */
.chart-legend {
    -fx-background-color: #D6861E; 
    -fx-padding: 20px;
}

儲存上面這個CSS檔案以後,開啟JavaFX應用程式的程式碼,加入設定CSS檔案的敘述:

...
Scene scene = new Scene(bc, 800, 600);
// 加入這行設定CSS檔案的敘述,位置跟檔案名稱要自己調整
scene.getStylesheets().add("mybarchart/mychart.css");
...

圖表邊界的預設值是5px,圖表內容預設的邊界是10px,上面的CSS設定檔把這些邊界加大一些,圖表看起來就比較不會那麼擁擠。這是套用樣式前和套用樣式後的樣子:

javafx_016  javafx_017

圖表元件中顯示的說明,可以使用「chart-legend-item」設定它們的樣式,包含說明的圖形、文字和其它樣式。開啟CSS檔案,在裡面加入這些樣式設定:

/* 設定圖表說明項目的圖形四邊的角度為0,也就是正方形 */
.chart-legend-item-symbol { 
    -fx-background-radius: 0;
}

/* 設定圖表說明的文字為白色 */
.chart-legend-item { 
    -fx-text-fill: #FFFFFF;
}

圖表說明項目的圖形預設值看起來像是一個圓形,四個邊角會設定為5px的圓角。是這是套用上面樣式設定後的樣子:

javafx_018

圖表的標題和資料的文字也都可以設定它們的樣式,與標題相關的設定是「chart-title」,設定資料說明文字使用「axis-label」。開啟CSS檔案,在裡面加入這些樣式設定:

/* 設定標題文字顏色和大小 */
.chart-title { 
    -fx-text-fill: #FFFFFF;
    -fx-font-size: 3.2em;
}

/* 設定資料說明文字顏色和大小 */
.axis-label { 
    -fx-text-fill: #FFFFFF;
    -fx-font-size: 1.8em;
}

這是套用上面樣式設定後的樣子:

javafx_019

如果需要設定圖表中的分隔線條和區塊的樣式,可以在CSS檔中加這些設定:

.chart-plot-background { 
    -fx-background-color: #e2ecfe;
} 

.chart-vertical-grid-lines {
    -fx-stroke: #3278fa; 
}

.chart-horizontal-grid-lines { 
    -fx-stroke: #3278fa;
} 

.chart-alternative-row-fill {
    -fx-fill: #99bcfd; 
    -fx-stroke: transparent; 
    -fx-stroke-width: 0;
}

這是套用上面樣式設定後的樣子:

javafx_020

圖表使用的預設樣式,在顯示資料刻度的線條都不會太明顯,你可以使用「.axis-tick-mark」和「.axis-minor-tick-mark」設定它們的樣式。開啟CSS檔案,在裡面加入這些樣式設定:

/* 設定主要刻度的顏色與寬度 */
.axis-tick-mark { 
    -fx-stroke: #FCB05B; 
    -fx-stroke-width: 3;
} 

/* 設定明細刻度的顏色 */
.axis-minor-tick-mark {
    -fx-stroke: #FCB05B; 
}

這是套用上面樣式設定後的樣子:

javafx_021

在圖表元件加入資料以後,JavaFX會採用預設的顏色為你決定每一個群組資料顯示的顏色。如果需要自己決定這些顏色的設定,可以使用「.default-color」的設定,在這個設定值後面從0開始是第一組資料,1是第二組,以此類推。條狀圖的顏色設定在後面接上「.chart-bar」,例如第一個群組的顏色是「.default-color0.chart-bar」。開啟CSS檔案,在裡面加入這些樣式設定:

/* 設定四個群組的顏色為紅、綠、藍、黃 */
.default-color0.chart-bar { 
    -fx-bar-fill: #FF0000;
}

.default-color1.chart-bar { 
    -fx-bar-fill: #00FF00;
}

.default-color2.chart-bar { 
    -fx-bar-fill: #0000FF;
}

.default-color3.chart-bar { 
    -fx-bar-fill: #FFF017;
}

這是套用上面樣式設定後的樣子:

javafx_022

參考資料:

JavaFX 2.2 Chart API Documentation

JavaFX 2 CSS Reference Guide

分享:
按讚!加入 CodeData Facebook 粉絲群

留言

留言請先。還沒帳號註冊也可以使用FacebookGoogle+登錄留言

關於作者

目前是自由講師與作者,專長是教育訓練課程規劃、教材編製與課程推廣,技術書籍與專欄寫作。涵蓋的領域有OOAD、Java程式設計、JavaFX、Oracle ADF、Android與SQL。熱衷於教育訓練,有十年以上的教學經驗,曾任台灣昇陽教育訓練中心講師,甲骨文授權教育訓練中心講師,於Java TWO與Java認證日負責Java FX與Oracle ADF專題演講。

熱門論壇文章

熱門技術文章