譯自《Charts》

圖表

JavaFX提供了一組方便的圖表（handy set of charts），可快速顯示數(shù)據(jù)可視化。 雖然有更豐富的圖表庫，如JFreeChart 和Orson Charts，可以與TornadoFX一起使用，但內(nèi)置的JavaFX圖表可滿足大多數(shù)可視化需求。 當(dāng)數(shù)據(jù)填充（populated）或更改（changed）時(shí)，它們也具有優(yōu)雅的動(dòng)畫。

TornadoFX帶有幾個(gè)構(gòu)建器，以使用函數(shù)結(jié)構(gòu)簡化圖表聲明。

餅圖

PieChart是一個(gè)常見的視覺輔助，以說明整體的比例。 它在結(jié)構(gòu)上比XY圖更簡單，這個(gè)我們稍后將會(huì)了解。 在piechart()構(gòu)建器中，您可以調(diào)用data()函數(shù)來傳遞多個(gè)類別值對(duì)（category-value pairs）（圖8.1）。

piechart("Desktop/Laptop OS Market Share") {
    data("Windows", 77.62)
    data("OS X", 9.52)
    data("Other", 3.06)
    data("Linux", 1.55)
    data("Chrome OS", 0.55)
}

圖8.1

注意，您還可以提供一個(gè)預(yù)先準(zhǔn)備的明確的ObservableList<PieChart.Data>。

val items = listOf(
        PieChart.Data("Windows", 77.62),
        PieChart.Data("OS X", 9.52),
        PieChart.Data("Other", 3.06),
        PieChart.Data("Linux", 1.55),
        PieChart.Data("Chrome OS", 0.55)
).observable()

piechart("Desktop/Laptop OS Market Share", items)

以下piechart后的代碼塊可用于修改piechart的任何屬性，就像我們涵蓋的任何其他控件的構(gòu)建器一樣。 您還可以利用for()循環(huán)，序列（Sequences）和其他迭代工具來添加任意數(shù)量的數(shù)據(jù)項(xiàng)。

val items = listOf(
        PieChart.Data("Windows", 77.62),
        PieChart.Data("OS X", 9.52),
        PieChart.Data("Other", 3.06),
        PieChart.Data("Linux", 1.55),
        PieChart.Data("Chrome OS", 0.55)
).observable()

piechart("Desktop/Laptop OS Market Share") {
    for (item in items) {
        data.add(item)
    }
}

基于映射的數(shù)據(jù)源（Map-Based Data Sources）

有時(shí)您可能希望使用Map作為數(shù)據(jù)源來構(gòu)建圖表。 使用Kotlin操作符，可以以Kotlin的方式構(gòu)造Map，然后將其傳遞給data函數(shù)。

 val items = mapOf(
        "Windows" to 77.62,
        "OS X" to 9.52,
        "Other" to 3.06,
        "Linux" to 1.55,
        "Chrome OS" to 0.55
)

piechart("Desktop/Laptop OS Market Share") {
    data(items)
}

基于XY的圖表

大多數(shù)圖表通常處理XY軸上的一個(gè)或多個(gè)數(shù)據(jù)點(diǎn)系列。 最常見的是條狀和線狀圖（bar and line charts）。

條形圖

您可以通過BarChart表示一個(gè)或多個(gè)數(shù)據(jù)點(diǎn)。 該圖表可以方便地比較不同數(shù)據(jù)點(diǎn)與X或Y軸的距離（圖8.2）。

 barchart("Unit Sales Q2 2016", CategoryAxis(), NumberAxis()) {
    series("Product X") {
        data("MAR", 10245)
        data("APR", 23963)
        data("MAY", 15038)
    }
    series("Product Y") {
        data("MAR", 28443)
        data("APR", 22845)
        data("MAY", 19045)
    }
}

圖8.2

以上， series()和data()函數(shù)可以快速構(gòu)建支持圖表的數(shù)據(jù)結(jié)構(gòu)。 在構(gòu)建中，您將需要為每個(gè)X軸和Y軸構(gòu)造適當(dāng)?shù)?code>Axis類型。 在這個(gè)例子中，這幾個(gè)月不一定是數(shù)字的，而是字符串。 因此，它們最好由CategoryAxis代表。 已經(jīng)是數(shù)字的單位適合使用NumberAxis。

在series()和data()塊中，您可以自定義其他屬性，如顏色。 您甚至可以調(diào)用style()來快速將類型安全的CSS應(yīng)用于圖表。

LineChart和AreaChart

LineChart將XY軸上的數(shù)據(jù)點(diǎn)用線連接起來，快速可視化它們之間的向上和向下趨勢（圖8.3）

linechart("Unit Sales Q2 2016", CategoryAxis(), NumberAxis()) {
    series("Product X") {
        data("MAR", 10245)
        data("APR", 23963)
        data("MAY", 15038)
    }
    series("Product Y") {
        data("MAR", 28443)
        data("APR", 22845)
        data("MAY", 19045)
    }
}

圖8.3

后臺(tái)數(shù)據(jù)結(jié)構(gòu)與BarChart沒有太大的不同，并且以相同的方式使用series()和data()函數(shù)。

您還可以使用一個(gè)名為AreaChart的LineChart變體，它將使線下面的區(qū)域以及任何重疊部分具有明顯的顏色（圖8.4）。

圖8.4

Multiseries

您可以使用multiseries()函數(shù)簡化多個(gè)系列的聲明，并使用varargs值調(diào)用data()函數(shù)。 我們可以使用這個(gè)結(jié)構(gòu)鞏固我們以前的例子：

linechart("Unit Sales Q2 2016", CategoryAxis(), NumberAxis()) {

    multiseries("Product X", "Product Y") {
        data("MAR", 10245, 28443)
        data("APR", 23963, 22845)
        data("MAY", 15038, 19045)
    }
}

這只是減少樣板（boilerplate）的另一個(gè)便利，并快速聲明圖表的數(shù)據(jù)結(jié)構(gòu)。

ScatterChart

ScatterChart是XY數(shù)據(jù)系列的最簡單的表示形式。 它繪制這些數(shù)據(jù)點(diǎn)，但是不使用條形或線條。 它經(jīng)常用于繪制大量的數(shù)據(jù)點(diǎn)（large volume of data points），以便找到集群（clusters）。 以下是兩個(gè)不同產(chǎn)品系列的ScatterChart，繪制了每周機(jī)器容量（machine capacities by week）的簡要示例（圖8.5）。

scatterchart("Machine Capacity by Product/Week", NumberAxis(), NumberAxis()) {
    series("Product X") {
        data(1,24)
        data(2,22)
        data(3,23)
        data(4,19)
        data(5,18)
    }
    series("Product Y") {
        data(1,12)
        data(2,15)
        data(3,9)
        data(4,11)
        data(5,7)
    }
}

圖8.5

BubbleChart

BubbleChart是類似于ScatterPlot的另一個(gè)XY圖，但是有第三個(gè)變量來控制每個(gè)點(diǎn)的半徑。 您可以利用此功能來顯示，例如，按周計(jì)算出的氣泡半徑（bubble radii），反映使用的機(jī)器數(shù)量（圖8.6）。

 bubblechart("Machine Capacity by Output/Week", NumberAxis(), NumberAxis()) {
    series("Product X") {
        data(1,24,1)
        data(2,46,2)
        data(3,23,1)
        data(4,27,2)
        data(5,18,1)
    }
    series("Product Y") {
        data(1,12,1)
        data(2,31,2)
        data(3,9,1)
        data(4,11,1)
        data(5,15,2)
    }
}

圖8.6

概要

圖表是可視化數(shù)據(jù)的有效方法，而TornadoFX中的構(gòu)建器可以幫助快速創(chuàng)建它們。 您可以在Oracle的文檔（Oracle's documentation）中閱讀有關(guān)JavaFX圖表的更多信息。 如果您需要更高級(jí)的圖表功能，那么您可以使用JFreeChart和Orson Charts 等庫來利用并與TornadoFX互操作，但這超出了本書的范圍。