我想在我的 PrimeFaces (v5.3) 图表上画一些额外的线条，特别是在折线图上。查看 jqPlot 示例(PrimeFaces 使用 jqPlot 绘制图表)，this example显示我想要做什么。
我使用了 this answer 中描述的方法.
通过设置扩展器，我可以运行我自己的 javascript 函数，这允许我更改不同类型的配置。
创建模式时的Java:
private LineChartModel initLinearModel()
{
LineChartModel model = new LineChartModel();
model.setExtender("chartExtender");
LineChartSeries series1 = new LineChartSeries();
series1.setLabel("Series 1");
series1.set(1, 2);
series1.set(2, 1);
series1.set(3, 3);
series1.set(4, 6);
series1.set(5, 8);
model.addSeries(series1);
return model;
}
Xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:outputScript library="jqplot-plugin"
name="jqplot.canvasOverlay.min.js" />
<h:outputScript library="js" name="extra_config.js" />
<h:head>
<title>Chart</title>
</h:head>
<h:body>
<p:chart type="line" model="#{primeChart.lineModel1}"
style="height:300px;" />
</h:body>
</html>
Javascript函数:
function chartExtender() {
this.cfg.grid = {
background : '#888888',
}
this.cfg.canvasOverlay = {
show: true,
objects: [{horizontalLine: {
name: 'pebbles',
y: 3,
lineWidth: 2,
color: 'rgb(255, 55, 124)',
shadow: true,
lineCap: 'butt',
xOffset: 0
}}]
};
}
正在调用 javascript 函数，因为背景实际上已更改但我没有看到任何更改，我尝试使用 Canvas 覆盖。这是示例的输出:
我了解 PrimeFaces 附带的 jqPlot 版本不包含叠加插件。所以我下载了最新的 jqPlot 版本并在我的脚本中包含了覆盖插件(它被 JSF 包含)。但我可能错过了一些东西，或者在使用这个插件时采取了正确的方法。
firefox webconsole 报告它缺少 jquery。我也尝试包括
jquery.min.js和 jquery.jqplot.min.js (来自 jqplot 版本)，这消除了错误，但不显示水平线。如何包含 jqplot 插件？我怎样才能进一步调试这种情况以查看出了什么问题？
最佳答案
您的具体问题是由 JavaScript 资源的错误排序引起的，这些 JS 错误应该已经暗示了 jQuery 无法找到且不正确 <script>在生成的 HTML 输出中排序，正如您可以通过在 webbrowser 中右键单击“查看源”看到的那样。基本上，您通过错放 <h:outputScript> 在 jQuery 和 PrimeFaces 脚本之前加载了 jqPlot 脚本。之前 <h:head> .
如果您移动 <h:outputScript>内<h:body>与 target="head"像下面...
<h:head>
<title>Chart</title>
</h:head>
<h:body>
<h:outputScript library="jqplot-plugin" name="jqplot.canvasOverlay.min.js" target="head" />
<h:outputScript library="js" name="extra_config.js" target="head" />
<p:chart type="line" model="#{primeChart.lineModel1}" style="height:300px;" />
</h:body>
也可以看看:
无关 具体问题，
library="js"是不好的做法。仔细阅读 What is the JSF resource library for and how should it be used?它究竟意味着什么以及应该如何使用它(快速回答:摆脱它并使用 name="js/extra_config.js" )。
关于jsf-2 - 在 PrimeFaces 图表中使用 jqPlot 插件在图表上绘制线条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35971088/