Jsf 2 在PrimeFaces图表中使用jqPlot插件在图表上绘制线条_Jsf 2_Primefaces_Jqplot

Jsf 2 在PrimeFaces图表中使用jqPlot插件在图表上绘制线条

jsf-2 primefaces

Jsf 2 在PrimeFaces图表中使用jqPlot插件在图表上绘制线条,jsf-2,primefaces,jqplot,Jsf 2,Primefaces,Jqplot,我想在PrimeFaces（v5.3）图表上画一些额外的线，特别是在折线图上。查看jqPlot示例（PrimeFaces使用jqPlot绘制图表），显示了我想要做的事情我使用了中描述的方法通过设置扩展器，我可以运行自己的javascript函数，这允许我更改不同类型的配置 Java创建模式时： private LineChartModel initLinearModel() { LineChartModel model = new LineChartModel(); mode

我想在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函数正在被调用，因为背景实际上已经改变了，但是我没有看到任何改变，我尝试使用画布覆盖。以下是示例的输出：

我知道PrimeFaces附带的jqPlot版本不包括覆盖插件。因此，我下载了最新的jqPlot版本，并在我的脚本中包含了overlay插件（JSF正在包含该插件）。但是我可能错过了一些东西，或者在使用这个插件时采取了正确的方法

firefox webconsole报告缺少jquery。我还尝试了包含

jquery.min.js

和

jquery.jqplot.min.js

（来自jqplot发行版），这消除了错误，但没有显示水平线

如何包含jqplot插件？我如何进一步调试这种情况，以查看出了什么问题？

您的具体问题是由于JavaScript资源的顺序不正确造成的，这些JS错误应该已经暗示了这一点，抱怨找不到jQuery，并且生成的HTML输出中的顺序不正确，您可以通过右键单击查看源代码看到这一点韦伯罗瑟。基本上，在jQuery和PrimeFaces脚本之前加载jqPlot脚本的方法是将

放在

之前

如果使用下面的

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”
是一种不好的做法。仔细阅读它的确切含义和使用方法（快速回答：去掉它，使用
name=“js/extra\u config.js”
）

<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>