我的Highchart在Chrome中正常显示,但是当我尝试在Internet Explorer中打开它时,只显示标题和CSS边框。我的主要问题是,当我试图在java应用程序的jEditorPane中显示它时,它不会出现;它只显示边框。我可以在jEditorPane中显示简单的HTML页面,但我猜这与javascript / jquery有关吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chart Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
colors: ['#1a1334','#26294a','#01545a','#017351','#03c383','#aad962','#fbbf45','#ef6a32','#ed0345','#a12a5e','#710162','#110141']
});
var chart;
$(document).ready(function () {
$('#container').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: '#f5f5f5'
},
title: {
text: 'Chart Title',
style: {
fontSize: '35px',
fontWeight: 'bold',
fontFamily: 'Oswald'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.y}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontSize: '15px'
}
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 75,
backgroundColor: '#e4e4e4',
borderRadius: '5px',
itemStyle: {
fontSize: '15px',
fontWeight: 'light'
}
},
credits: {
enabled: false
},
series: [{
name: 'Chart Title',
innerSize: '40%',
data: [
['Work',11],
['Eat',2],
['Commute',2],
['Watch TV',2],
['Sleep',7],
['Other', 30],
['New', 45],
['Extra', 56], ]
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="width: 945px; height: 525px; border-color: #333; border-style: solid; border-width: 10px 5px 5px 10px;"></div>
</body>
</html>
jEditorPane代码:
jEditorPane1.setEditable(false);
try {
jEditorPane1.setPage(getClass().getResource("html/pie.html"));
} catch (IOException e) {
System.out.println(e);
}
Highcharts的大多数解决方案都没有显示脚本的顺序,但我很确定这不是我的问题。
有什么想法吗?
答案 0 :(得分:1)
尝试使用JavaFX中的WebView。
http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm
IIRC它基于Webkit,应该能够正确呈现高级图表