译自《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)
}
注意，您还可以提供一个预先准备的明确的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)
}
}
以上， 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)
}
}
后台数据结构与BarChart没有太大的不同，并且以相同的方式使用series()和data()函数。
您还可以使用一个名为AreaChart的LineChart变体，它将使线下面的区域以及任何重叠部分具有明显的颜色（图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)
}
}
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)
}
}
概要
图表是可视化数据的有效方法，而TornadoFX中的构建器可以帮助快速创建它们。 您可以在Oracle的文档（Oracle's documentation）中阅读有关JavaFX图表的更多信息。 如果您需要更高级的图表功能，那么您可以使用JFreeChart和Orson Charts 等库来利用并与TornadoFX互操作，但这超出了本书的范围。
