JAVAFX的WebView调用Echarts实现折线图，并解决点线不一致问题

最新推荐文章于 2024-06-26 16:16:20 发布

chenfei_blog

最新推荐文章于 2024-06-26 16:16:20 发布

阅读量2k

点赞数 1

分类专栏： JAVAFX 文章标签： javafx 折线图点线不对应

本文链接：https://blog.csdn.net/qq_24559133/article/details/85235231

版权

JAVAFX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

因为工作上需要在JAVAFX界面上展示折线图，fx自带的感觉功能又不强大，所以打算用了WebView调用Echarts实现折线图。

首先准备echarts.js，可以直接取官网下载最新版http://www.echartsjs.com/index.html。

然后准备个stage显示折线图。

JavaWebView.java

package com.demo.echarts4;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;

import javax.imageio.ImageIO;

import com.oim.core.business.webView.lineChart.bean.LineEChartBean;

import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker.State;
import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.scene.Scene;
import javafx.scene.SnapshotParameters;
import javafx.scene.image.WritableImage;
import javafx.scene.paint.Color;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import net.sf.json.JSONArray;
import netscape.javascript.JSObject;
import sun.misc.BASE64Decoder;


public class JavaWebView extends Application {

	@Override
	public void start(Stage stage) throws Exception {
        stage.setTitle("Web View Sample");
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.load(this.getClass().getResource("lineChart.html").toExternalForm());
		
        Scene scene = new Scene(webView, 850, 550, Color.web("lightgray"));
        stage.setScene(scene);
       
		webEngine.getLoadWorker().stateProperty().addListener((ObservableValue<? extends State> ov, State oldState, State newState) -> {

			if (newState == State.SUCCEEDED) {
//				StringBuilder js = new StringBuilder();
//				js.append("loadChartData(");
//				js.append(jsBean);
//				js.append(");");
//				System.out.println(js.toString());
//				webEngine.executeScript(js.toString());
				stage.show();
				
			}
		});
		
        
        // apply CSS style
//      scene.getStylesheets().add("webviewsample/BrowserToolbar.css");
        // show stage
//      stage.initStyle(StageStyle.UNDECORATED);// 设定窗口无边框
//		stage.initStyle(StageStyle.TRANSPARENT);
       
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

echarts.js引用到HTML界面中，并准备折线图显示区域。

lineChart.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>折线图</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
	<!-- 折线图 -->
	<div id="lineChart" style="width: 800px; height: 500px;margin:2% 2%">
	</div>
	<script type="text/javascript" src="line.js"></script>
</body>
</html>

line.js

$(function(){
	var option = {
		    title: {
		        text: '折线图堆叠'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['周一','周二','周三','周四','周五','周六','周日']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'邮件营销',
		            type:'line',
		            stack: '总量',
		            data:[120, 132, 101, 134, 90, 230, 210]
		        },
		        {
		            name:'联盟广告',
		            type:'line',
		            stack: '总量',
		            data:[220, 182, 191, 234, 290, 330, 310]
		        },
		        {
		            name:'视频广告',
		            type:'line',
		            stack: '总量',
		            data:[150, 232, 201, 154, 190, 330, 410]
		        },
		        {
		            name:'直接访问',
		            type:'line',
		            stack: '总量',
		            data:[320, 332, 301, 334, 390, 330, 320]
		        },
		        {
		            name:'搜索引擎',
		            type:'line',
		            stack: '总量',
		            data:[820, 932, 901, 934, 1290, 1330, 1320]
		        }
		    ]
		};
	//渲染方式默认为canvas，改为svg，解决折线图点线不对应的问题
	lineChart = echarts.init(document.getElementById('lineChart'), null, {renderer: 'svg'});
	lineChart.setOption(option);
	
});

Echarts版本4.x有新特性，在初始化是可以配置渲染方式为canvas或者svg，默认为canvas。

默认的canvas在浏览器上显示没有问题，但是在javafx界面上显示出现了点线不对应的问题。

所以在折线图初始化的时候，将渲染方式改为svg，折线图点线不对应的问题得到解决。

chenfei_blog

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JAVAFX的WebView调用Echarts实现折线图，并解决点线不一致问题

因为工作上需要在JAVAFX界面上展示折线图，fx自带的感觉功能又不强大，所以打算用了WebView调用Echarts实现折线图。首先准备echarts.js，可以直接取官网下载最新版http://www.echartsjs.com/index.html。然后准备个stage显示折线图。JavaWebView.javapackage com.demo.echarts4...
复制链接

扫一扫

专栏目录