在PrimeFaces图表中使用jqPlot插件在图表上绘制线 [英] Using jqPlot plugins in PrimeFaces charts to draw lines on chart
问题描述
我想在PrimeFaces(v5.3)图表上画一些额外的线，尤其是在折线图上.查看jqPlot示例(PrimeFaces使用jqPlot绘制图表)，此示例显示了我想做的事.
I would like to draw some extra lines on my PrimeFaces (v5.3) chart, in particular on a linechart. Looking at the jqPlot example (PrimeFaces uses jqPlot to draw the charts), this example shows what I want to do.
我使用了此答案中所述的方法.
I have used the approach described in this answer.
通过设置扩展器，我可以运行自己的javascript函数，从而可以更改不同类型的配置.
By setting an extender I am able to run my own javascript function, which allows me to change different types of configuration.
创建模式时的Java:
Java when creating the mode:
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函数:
Javascript function:
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函数，因为实际上是在更改背景，但是我看不到尝试使用画布覆盖的任何更改.这是示例的输出:
The javascript function is being called, as the background is actually changed But I see no changes I try to use the canvas overlay. Here is the output of the example:
我了解PrimeFaces随附的jqPlot版本不包含overlay插件.因此，我已经下载了最新的jqPlot版本，并在我的脚本中包含了overlay插件(JSF包含了该插件).但是我可能很想念某些东西，或者在使用此插件时采取了正确的方法.
I understand the jqPlot version that comes with PrimeFaces does not include the overlay plugin. So I have downloaded the latest jqPlot release and included the overlay plugin in my script (it is being included by JSF). But I might have very well missed something, or be taking the right approach when using this plugin.
firefox Web控制台报告缺少jquery.我还尝试包括jquery.min.js和jquery.jqplot.min.js(来自jqplot版本)，这消除了错误，但未显示水平线.
The firefox webconsole reports it is missing jquery. I have also tried to include jquery.min.js and jquery.jqplot.min.js (from the jqplot release), this removed the error, but does not show the horizontal line.
如何包含jqplot插件?我该如何进一步调试这种情况以查看问题所在?
How do I include a jqplot plugin? How can I further debug this situation to see what is going wrong?
推荐答案
您的具体问题是由JavaScript资源的不正确排序引起的，这些错误应该已经由那些抱怨jQuery找不到且错误的<script>排序错误的JS错误提示.您可以通过在Webbrowser中右键单击查看源代码来查看生成的HTML输出中的内容.基本上，您是通过将<h:outputScript>放在<h:head>之前的位置，在jQuery和PrimeFaces脚本之前 加载了jqPlot脚本.
Your concrete problem is caused by incorrect ordering of JavaScript resources which should already be hinted by those JS errors complaining jQuery couldn't be found and incorrect <script> ordering in generated HTML output as you could see via rightclick View Source in webbrowser. Basically, you loaded the jqPlot script before jQuery and PrimeFaces scripts by misplacing the <h:outputScript> before <h:head>.
如果将<h:outputScript> <h:body>移入内部，如下所示，则target="head" ...
If you move the <h:outputScript> inside <h:body> with a target="head" like below ...
<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>
...然后魔术将开始起作用.
... then magic will start to work.
- How to reference CSS / JS / image resource in Facelets template?
- How to use jQuery and jQuery plugins with PrimeFaces
无关与具体问题无关，library="js"是一种不好的做法.仔细阅读>什么是JSF资源库以及如何使用它?它的确切含义和用法(快速答案:摆脱它并使用name="js/extra_config.js").
Unrelated to the concrete problem, library="js" is a bad practice. Carefully read What is the JSF resource library for and how should it be used? what exactly it means and how it should be used (quick answer: get rid of it and use name="js/extra_config.js").
这篇关于在PrimeFaces图表中使用jqPlot插件在图表上绘制线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
