首页 文章

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

提问于
浏览 次
6

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

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

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

如何添加jqplot插件？我怎样才能进一步调试这种情况，看看出了什么问题？

jsf-2 primefaces jqplot

1 回答

  • 6

    您的具体问题是由JavaScript资源的错误排序引起的，这些错误应该已经被那些抱怨jQuery的JS错误所暗示，并且生成的HTML输出中的错误 <script> 排序正如您在webbrowser中通过右键单击View Source看到的那样 . 基本上，您通过错误放置 <h:outputScript> <h:head> 之前在jQuery和PrimeFaces脚本之前加载了jqPlot脚本 .

    如果你在 <h:body> 里面用 target="head" 移动 <h:outputScript> ，如下所示......

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

    ......然后魔术就会开始起作用 .

    enter image description here

    另见：

    Unrelated 对于具体问题， library="js" 是一个不好的做法 . 仔细阅读What is the JSF resource library for and how should it be used?究竟是什么意思以及如何使用它（快速回答：摆脱它并使用 name="js/extra_config.js" ） .

    回复于

相关问题