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

FengLing255

已于 2022-04-22 00:13:30 修改

阅读量6k

点赞数 2

分类专栏： JavaSE 文章标签： java echarts

于 2022-04-22 00:13:04 首次发布

本文链接：https://blog.csdn.net/qq_33512762/article/details/124324879

版权

JavaSE 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

需求

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

~ 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",//请求方式为get
        dataType: "json", //返回数据格式为json
        async: 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());

效果

请添加图片描述

FengLing255

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录