我正在尝试将此page导入我的JSF页面，该页面将有数据库来获取数据，以便更具交互性。
所以我这样做了：
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h:outputScript>
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
// Build the data arrays
var browserData = [];
var versionsData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
for (var j = 0; j < data[i].drilldown.data.length; j++) {
var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
});
});
</h:outputScript>
</h:head>
<h:body>
<script type="text/javascript" src="../../resources/javascript/highchart/highcharts.js"></script>
<script type="text/javascript" src="../../resources/javascript/highchart/modules/exporting.js"></script>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</h:body>
</html>
但是当我尝试跑步时给我这个错误：
Error Parsing /showroom/report.xhtml: Error Traced[line: 71] The content of elements must consist of well-formed character data or markup.
引用的行是：
for (var i = 0; i < data.length; i++) {
我不知道这有什么问题，我总是将HTML代码导入JSF并且永远不会发生此错误。
如何解决这个问题？
答案 0 :(得分：4)
这不是HTML代码，这是JavaScript代码。 JavaScript语言有几个运算符，它们是XML中的special characters（Facelets是基于XHTML + XML的视图技术），例如<，>和&。需要将它们转义为<，>和&，以防止XML解析器直接将它们解释为XML。
for (var i = 0; i < data.length; i++) {
另一种方法是将整个JS代码包装在<![CDATA[ ... ]]>块中。
但是，更好的方法是将JS代码放在自己的JS文件中并将其包含在<h:outputScript>中，例如
<h:outputScript name="global.js" />
无关，您没有从JSF资源管理中受益。我建议更换
<script type="text/javascript" src="../../resources/javascript/highchart/highcharts.js"></script>
<script type="text/javascript" src="../../resources/javascript/highchart/modules/exporting.js"></script>
通过
<h:outputScript name="javascript/highchart/highcharts.js" />
<h:outputScript name="javascript/highchart/modules/exporting.js" />
这样您就不需要摆弄容易出错的URI相对路径。
更新：根据评论，您希望将一些Java变量传递给脚本文件。您可以通过将Java对象（可以是javabean或Map<String, Object>）打印为JSON对象来完成此操作，就好像它是一个全局JS变量一样。
<h:outputScript>var data = ${bean.dataAsJson};</h:outputScript>
例如（在Gson的帮助下）
public String getDataAsJson() {
return gson.toJson(someBeanOrSomeMap);
}
（或者只是在托管bean（post）构造期间创建JSON对象）
该脚本将能够以data.someBeanPropertyOrMapKey访问它。