Java数据可视化 (JavaFX, Apache ECharts)

定义~, &, ? 三种新运算。

~ a b c = a + b – c

& a b c d e = a + b + c – d – e

? a b c d = a + b – c + d

给定表达式，要求计算结果、解析为正常的算数表达式、构建表达式树并绘制该树形结构。

本文章记录如何绘制树形结构。

考虑到树中一个结点的孩子最多有五个，不便于使用字符串进行绘制。并且要求不能使用TreeView这种横向的控件，只允许从上至下地绘制，所以使用ECharts中的树状图来解决。

JavaFX是一个开源的客户端应用平台，适用于基于Java构建的桌面、移动端和嵌入式系统。可以使用JavaFX绘制图形化界面。ECharts是一款基于JS的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

JavaFX中的WebView控件可以实现html的展示。所以可以通过java将数据以json的形式储存到文件中，通过html读取并调用ECharts库实现数据的可视化。

corretto的JDK由于GPL协议的缘故，不支持webkit，所以无法正常使用WebView。

考虑到对webkit的支持以及javaFX库的内置（便于客户配置环境），选择BellSoft的完全版JDK8。要注意，一定要选择完全版，BellSoft标准版JDK8并未内置JavaFX。

使用SceneBuilder生成fxml文件，包括文本输入框、按钮、信息展示用的文本区域、WebView。

对于一个树形结构，根据ECharts的API，需要提供如下的json数据

{
  "name": "~",
  "children": [
    {
      "name": "1",
      "children": []
    },
    {
      "name": "2",
      "children": []
    },
    {
      "name": "3",
      "children": []
    }
  ]
}

可以在树形结构的结点类TreeObject中递归地实现toString()方法来拼接json，并将其储存到文件中

将文件的位置视为url，发出ajax请求即可获取json数据，再通过ECharts进行展示

下面是异步请求相关的代码，需要导入jQuery.js与echarts.js

在java程序中，使用如下代码通过WebView对象获取WebEngine对象

WebEngine engine = webView.getEngine();

可以通过下面的语句加载本地html文件

engine.load(this.getClass().getResource("index.html").toExternalForm());