需求

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

~ 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库实现数据的可视化。

实现

JDK的选取

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

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

图形界面的绘制

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

<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.web.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?><AnchorPane prefHeight="800.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Program"><children><TextField layoutX="53.0" layoutY="242.0" /><Button layoutX="120.0" layoutY="385.0" mnemonicParsing="false" text="eval" /><Text layoutX="53.0" layoutY="58.0" strokeType="OUTSIDE" strokeWidth="0.0" /><WebView layoutX="287.0" layoutY="113.0" prefHeight="639.0" prefWidth="877.0" /></children>
</AnchorPane>

拼接json文件

对于一个树形结构，根据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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="echarts.js"></script><script src="jQuery.js"></script>
</head>
<body><!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">var data = $.ajax({url: "dataset.json",//json文件位置，文件名type: "GET",//请求方式为getdataType: "json", //返回数据格式为jsonasync: false,success: function(data) {//请求成功完成后要执行的方法// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'item',triggerOn: 'mousemove'},series: [{type: 'tree',data: [data],left: '2%',right: '2%',top: '8%',bottom: '20%',symbol: 'emptyCircle',orient: 'vertical',expandAndCollapse: true,label: {position: 'top',rotate: 0,verticalAlign: 'middle',align: 'right',fontSize: 22},leaves: {label: {position: 'bottom',rotate: 0,verticalAlign: 'middle',align: 'left'}},animationDurationUpdate: 750}]};//设置内容myChart = echarts.init(document.getElementById('main'));myChart.setOption(option);}});</script>
</body>
</html>

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

WebEngine engine = webView.getEngine();

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

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

效果

Java数据可视化 (JavaFX, Apache ECharts)相关推荐

1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
目录效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 需求确认 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.开发环境搭建 1.Java开发环 ...
12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前小伙伴们建议我出一些视频课程来学习Echarts,这样可以更快上 ...
3【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-物联网
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
java数据可视化平台初步构想
2019独角兽企业重金招聘Python工程师标准>>> java数据可视化平台初步构想平台架构权限系统-负责后台用户权限后台管理系统(oss)-负责后台运营配置相关操作前端展 ...
【1】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 互联网企业数据
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据
目录精彩案例汇总效果展示一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1 ...
【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传
目录效果展示多主题样式一. 确定需求方案 1.确定产品上线部署的屏幕分辨率 2.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1.前端html代码 - ...
33【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏 - 制造业生产管理看板
效果展示 1.动态实时更新数据效果图 2.鼠标右键切换主题一.确定需求方案 1. 屏幕分辨率这个案例的分辨率是16:9,最常用的的宽屏比. 根据电脑分辨率屏幕自适应显示,F11全屏查看: 2. 部 ...

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

需求

思路

实现

JDK的选取

图形界面的绘制

拼接json文件

前端展示

效果

Java数据可视化 (JavaFX, Apache ECharts)相关推荐

最新文章

热门文章