在 PrimeFaces 图表中使用 jqPlot 插件在图表上绘制线条答案

【问题标题】：Using jqPlot plugins in PrimeFaces charts to draw lines on chart在 PrimeFaces 图表中使用 jqPlot 插件在图表上绘制线条
【发布时间】：2016-06-28 12:29:17
【问题描述】：

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

我了解 PrimeFaces 附带的 jqPlot 版本不包含叠加插件。所以我已经下载了最新的 jqPlot 版本并在我的脚本中包含了覆盖插件（它被 JSF 包含）。但是我很可能错过了一些东西，或者在使用这个插件时采取了正确的方法。

firefox webconsole 报告它缺少 jquery。我还尝试包含 jquery.min.js 和 jquery.jqplot.min.js（来自 jqplot 版本），这消除了错误，但不显示水平线。

如何包含 jqplot 插件？如何进一步调试这种情况以查看问题所在？

【问题讨论】：

标签： jsf-2 primefaces jqplot

【解决方案1】：

您的具体问题是由 JavaScript 资源的错误排序引起的，这些 JS 错误抱怨找不到 jQuery 和不正确的<script> 在生成的 HTML 输出中排序应该已经提示，正如您可以通过右键单击看到的那样 View网页浏览器中的来源。基本上，您通过在<h:head> 之前错放<h:outputScript> 来加载jqPlot 脚本之前 jQuery 和PrimeFaces 脚本。

如果您将<h:outputScript> inside <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"）。

【讨论】：