JavaFX 折线图

34 篇文章 0 订阅 ¥29.90 ¥99.00

折线图,一种双轴图表,显示了特定时间间隔内数据的动态。

对于双轴图表,我们可以定义一系列数据XYChart.Series类。

我们可以为每个系列分配一个名称,以便在图例中显示。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class Main extends Application {
    
    @Override
    public void start(Stage stage) {
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        final LineChart<Number, Number> lineChart = new LineChart<Number, Number>(
            xAxis
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ECharts是一个基于JavaScript的数据可视化库,而JavaFX是一个现代的Java GUI工具包。为了在JavaFX中使用ECharts绘制折线图,可以使用WebView组件来嵌入ECharts JavaScript代码,并将数据传递给它。以下是一个简单的示例: 1. 首先,需要下载并引入ECharts的JavaScript文件和JavaFX的WebEngine类。 2. 在JavaFX的FXML文件中创建一个WebView组件,并设置其大小和位置。 3. 在JavaFX的Controller类中,使用WebEngine加载ECharts的JavaScript文件,并在WebView中显示它。 4. 将数据传递给ECharts JavaScript代码,使用以下代码: ``` webEngine.executeScript("var data = " + data + ";"); ``` 5. 使用ECharts的API绘制折线图,例如: ``` webEngine.executeScript("var myChart = echarts.init(document.getElementById('chart'));" + "var option = {" + " xAxis: {" + " type: 'category'," + " data: data.xAxis" + " }," + " yAxis: {" + " type: 'value'" + " }," + " series: [{" + " data: data.series," + " type: 'line'" + " }]" + "};" + "myChart.setOption(option);"); ``` 其中,data是一个包含x轴和y轴数据的JSON对象。 完整的示例代码如下: FXML文件: ``` <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.layout.*?> <?import javafx.scene.web.*?> <?import javafx.scene.control.*?> <BorderPane fx:controller="sample.Controller" xmlns:fx="http://javafx.com/fxml" > <center> <WebView fx:id="webView" prefHeight="400.0" prefWidth="600.0" /> </center> </BorderPane> ``` Controller类: ``` package sample; import javafx.fxml.FXML; import javafx.scene.web.WebEngine; import javafx.scene.web.WebView; public class Controller { @FXML private WebView webView; public void initialize() { WebEngine webEngine = webView.getEngine(); webEngine.load(getClass().getResource("echarts.html").toExternalForm()); String data = "{" + " \"xAxis\": [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]," + " \"series\": [820, 932, 901, 934, 1290, 1330, 1320]" + "}"; webEngine.executeScript("var data = " + data + ";"); webEngine.executeScript("var myChart = echarts.init(document.getElementById('chart'));" + "var option = {" + " xAxis: {" + " type: 'category'," + " data: data.xAxis" + " }," + " yAxis: {" + " type: 'value'" + " }," + " series: [{" + " data: data.series," + " type: 'line'" + " }]" + "};" + "myChart.setOption(option);"); } } ``` echarts.html文件: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts Example</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 100%; height: 100%;"></div> </body> </html> ``` 运行JavaFX程序后,将会显示一个包含折线图的WebView组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑石课堂

请给我打钱!!!谢谢,不客气!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值