译自《Charts》

图表

JavaFX提供了一组方便的图表（handy set of charts），可快速显示数据可视化。 虽然有更丰富的图表库，如JFreeChart 和Orson Charts，可以与TornadoFX一起使用，但内置的JavaFX图表可满足大多数可视化需求。 当数据填充（populated）或更改（changed）时，它们也具有优雅的动画。

TornadoFX带有几个构建器，以使用函数结构简化图表声明。

饼图

PieChart是一个常见的视觉辅助，以说明整体的比例。 它在结构上比XY图更简单，这个我们稍后将会了解。 在piechart()构建器中，您可以调用data()函数来传递多个类别值对（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

注意，您还可以提供一个预先准备的明确的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的任何属性，就像我们涵盖的任何其他控件的构建器一样。 您还可以利用for()循环，序列（Sequences）和其他迭代工具来添加任意数量的数据项。

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)
    }
}

基于映射的数据源（Map-Based Data Sources）

有时您可能希望使用Map作为数据源来构建图表。 使用Kotlin操作符，可以以Kotlin的方式构造Map，然后将其传递给data函数。

 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的图表

大多数图表通常处理XY轴上的一个或多个数据点系列。 最常见的是条状和线状图（bar and line charts）。

条形图

您可以通过BarChart表示一个或多个数据点。 该图表可以方便地比较不同数据点与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()函数可以快速构建支持图表的数据结构。 在构建中，您将需要为每个X轴和Y轴构造适当的Axis类型。 在这个例子中，这几个月不一定是数字的，而是字符串。 因此，它们最好由CategoryAxis代表。 已经是数字的单位适合使用NumberAxis。

在series()和data()块中，您可以自定义其他属性，如颜色。 您甚至可以调用style()来快速将类型安全的CSS应用于图表。

LineChart和AreaChart

LineChart将XY轴上的数据点用线连接起来，快速可视化它们之间的向上和向下趋势（图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

后台数据结构与BarChart没有太大的不同，并且以相同的方式使用series()和data()函数。

您还可以使用一个名为AreaChart的LineChart变体，它将使线下面的区域以及任何重叠部分具有明显的颜色（图8.4）。

图8.4

Multiseries

您可以使用multiseries()函数简化多个系列的声明，并使用varargs值调用data()函数。 我们可以使用这个结构巩固我们以前的例子：

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）的另一个便利，并快速声明图表的数据结构。

ScatterChart

ScatterChart是XY数据系列的最简单的表示形式。 它绘制这些数据点，但是不使用条形或线条。 它经常用于绘制大量的数据点（large volume of data points），以便找到集群（clusters）。 以下是两个不同产品系列的ScatterChart，绘制了每周机器容量（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的另一个XY图，但是有第三个变量来控制每个点的半径。 您可以利用此功能来显示，例如，按周计算出的气泡半径（bubble radii），反映使用的机器数量（图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

概要

图表是可视化数据的有效方法，而TornadoFX中的构建器可以帮助快速创建它们。 您可以在Oracle的文档（Oracle's documentation）中阅读有关JavaFX图表的更多信息。 如果您需要更高级的图表功能，那么您可以使用JFreeChart和Orson Charts 等库来利用并与TornadoFX互操作，但这超出了本书的范围。