因为工作上需要在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,折线图点线不对应的问题得到解决。