我尝试将JavaScript库'Highcharts 2.3.5'（基于jQuery）与Java Server Faces 2.0（Apache MyFaces）一起使用。
我只是想尝试Highcharts示例中的基本示例。示例如下所示：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
所以我创建了一个面孔模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
<ui:insert name="head">
</ui:insert>
</h:head>
<h:body>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
</h:body>
</html>
我将其用于我的Highchart代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/mytemplate.xhtml">
<ui:define name="head">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var chart;
$(document)
.ready(
function() {
chart = new Highcharts.Chart(
{
chart : {
renderTo : 'container',
type : 'line',
marginRight : 130,
marginBottom : 25
},
title : {
text : 'Monthly Average Temperature',
x : -20
//center
},
subtitle : {
text : 'Source: WorldClimate.com',
x : -20
},
xAxis : {
categories : [ 'Jan',
'Feb', 'Mar',
'Apr', 'May',
'Jun', 'Jul',
'Aug', 'Sep',
'Oct', 'Nov', 'Dec' ]
},
yAxis : {
title : {
text : 'Temperature (°C)'
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip : {
formatter : function() {
return '<b>'
+ this.series.name
+ '</b><br/>t_$ta_$tag'
+ this.x + ': '
+ this.y + '°C';
}
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
series : [
{
name : 'Tokyo',
data : [ 7.0, 6.9,
9.5, 14.5,
18.2, 21.5,
25.2, 26.5,
23.3, 18.3,
13.9, 9.6 ]
},
{
name : 'New York',
data : [ -0.2, 0.8,
5.7, 11.3,
17.0, 22.0,
24.8, 24.1,
20.1, 14.1,
8.6, 2.5 ]
},
{
name : 'Berlin',
data : [ -0.9, 0.6,
3.5, 8.4,
13.5, 17.0,
18.6, 17.9,
14.3, 9.0,
3.9, 1.0 ]
},
{
name : 'London',
data : [ 3.9, 4.2,
5.7, 8.5,
11.9, 15.2,
17.0, 16.6,
14.2, 10.3,
6.6, 4.8 ]
} ]
});
}); });
</script>
</ui:define>
<ui:define name="content">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</ui:define>
</ui:composition>
</html>
但是我看不到我的脸实现的图表。我的问题是什么？有没有更好的方法或常用的方法将javascript/jQuery/highcharts与JSF一起使用？
编辑：更正了我的代码。我确信，Javascript代码已加载。
但是当我使用 firebug 检查我的代码时，我的"highchart"函数会生成两次。为什么会这样？
您没有关闭匿名函数。在头部的结束</script>标记之前添加});。
请参阅下面的代码片段：
<ui:composition template="/mytemplate.xhtml">
<ui:define name="head">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var chart;
$(document)
.ready(
function() {
chart = new Highcharts.Chart(
<!-- CODE CONTINUES -->
} ]
}); // END new Highcharts.Chart()
}); // END $(document).ready()
}); // THIS WAS MISSING!!
</script>
</ui:define>
将所有代码放在 js 文件中并将其包含在 xhtml 中，而不是在浏览器控制台中查找错误，您还可以 jslint 代码...
将以下行添加到第一行的高图表代码中...
jQuery.noConflict();
例如：-
$(function () {
var chart;
jQuery.noConflict(); //add this
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
}, ..........