我正在尝试遵循@BalusC 的建议 here . (我现在写在这里是因为它与之前的问题无关)。
所以我需要从我的数据库中获取数据并使用 JavaScript 在图表中显示,this is an example . 我只是在做这个示例,以便我可以了解如何从服务器端向客户端显示一些数据。
我的 bean :
@ManagedBean(name="reportc")
@ViewScoped
public class ReportControl implements Serializable {
private static final long serialVersionUID = 3269125738504434502L;
private String[] dataAsJson = {"1.3", "2.1", "1.3", "2.2", "1.4", "2.7", "1.5", "2.1", "1.6", "2.4", "1.9", "2.1"};
public String getDataAsJson() {
Gson gson = new Gson();
return gson.toJson(dataAsJson);
}
}
帮助理解 spline-plot-bands.js文件。
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
...
<h:head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>
<h:outputScript name="javascript/highchart/spline-plot-bands.js" />
</h:head>
<h:body>
<h:outputScript name="javascript/highchart/highcharts.js" />
<h:outputScript name="javascript/highchart/modules/exporting.js" />
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</h:body>
</html>
正如您在 spline-plot-bands.js 中看到的那样文件。
对我来说最重要的是这一部分(我猜):
series: [{
name: 'Hestavollane',
data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0]
}, {
name: 'Voll',
data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
}]
我如何从我的服务器端向这个 javascript 发送这样的东西?
我想我已经接近了解如何将 gson、javascript 与 jsf 结合使用,但我仍然不明白如何完成它。 有人可以帮我解决这个问题吗?
最佳答案
JS 需要一个 double[]
,但你提供的是一个 String[]
。相应地修复它:
private double[] hestavollane = {
4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0
};
private double[] voll = {
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4
};
public String getDataAsJson() {
Map<String, Object> data = new HashMap<String, Object>();
data.put("hestavollane", hestavollane);
data.put("voll", voll);
return new Gson().toJson(data);
}
并编辑您的 spline-plot-bands.js
文件以使用它而不是硬编码值:
series: [{
name: 'Hestavollane',
data: data.hestavollane
}, {
name: 'Voll',
data: data.voll
}]
关于javascript - 如何在 Javascript 和 JSF 中使用数据库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9575009/