使用PrimeFaces图表中的jqPlot插件在图表上绘制线条
Thi*_*ler 6 jqplot primefaces jsf-2
我想在PrimeFaces(v5.3)图表上绘制一些额外的行,特别是在线图上.查看jqPlot示例(PrimeFaces使用jqPlot绘制图表),此示例显示了我想要做的事情.
我使用了这个答案中描述的方法.
通过设置扩展程序,我可以运行自己的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函数,因为背景实际上已更改但我看到没有任何更改我尝试使用画布覆盖.以下是示例的输出:
我理解PrimeFaces附带的jqPlot版本不包括overlay插件.所以我已经下载了最新的jqPlot版本,并在我的脚本中包含了overlay插件(它被JSF包含).但是我可能已经错过了一些东西,或者在使用这个插件时采取了正确的方法.
firefox webconsole报告它缺少jquery.我也尝试包括jquery.min.js和jquery.jqplot.min.js(从jqplot版本),这删除了错误,但没有显示水平线.
如何添加jqplot插件？我怎样才能进一步调试这种情况,看看出了什么问题？
您的具体问题是由应该已经被那些JS错误抱怨的jQuery来暗示的JavaScript资源的顺序不正确找不到和不正确造成<script>在生成的HTML输出,你可以通过右击看到排序查看源代码的网页浏览器.基本上,您加载的jqPlot脚本之前由乱放jQuery和PrimeFaces脚本<h:outputScript>之前<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"是一种不好的做法.仔细阅读什么是JSF资源库以及如何使用它？究竟是什么意思以及应该如何使用(快速回答:摆脱它并使用name="js/extra_config.js").
| 归档时间： |
|
| 查看次数： |
2737 次 |
| 最近记录： |