Primefaces 图表中的区间选择事件

Question

我有一个动态折线图。我将缩放设置为 false 但我希望能够在选择图表中的区域时触发 Ajax 事件（就像选择要缩放的区域时的缩放功能），我想要调用服务器方法并获取所选区域的最大和最小 x 轴值。有人可以帮忙吗？

否则，如果我将缩放设置为 true，是否有任何方法可以从缩放区域获取值？

Answer 1

PrimeFaces 和 JSF 在这种情况下只不过是一个 html/javascript/css 生成器。如果您在浏览器开发人员工具中查看生成页面的源代码，您会看到很多 javascript，包括所有数据点。

<script id="j_idt87_s" type="text/javascript">
    $(function(){PrimeFaces.cw('Chart','chart'{
        id:'j_idt87',
        type:'line',
        data:[[[1,2],[2,1],[3,3],[4,6],[5,8]],[[1,6],[2,3],[3,2],[4,7],[5,9]]],
        title:"Zoom",
        legendPosition:"e",
        axes:{
            xaxis:{
              label:"",
              renderer:$.jqplot.LinearAxisRenderer,
              tickOptions:{angle:0}},
            yaxis: {
              label:"",
              min:0,
              max:10,
              renderer:$.jqplot.LinearAxisRenderer,
              tickOptions:{angle:0}}
         },
         series:[{label:'Series 1',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'Series 2',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}}],zoom:true,datatip:true},'charts');});
    </script>

因此 this 问题的答案也适用于 PrimeFaces 图表。

运行 zoom examples 上浏览器开发人员工具中的以下代码（来自上面的 link）将向您显示落在缩放区域中的数据点

chart = PF('chart').plot;
PF('chart').plot.target.bind('jqplotZoom', function(ev, gridpos, datapos, plot, cursor){
    var plotData =  plot.series[0].data;
    for (var i=0; i< plotData.length; i++) {
        if(plotData[i][0] >= chart.axes.xaxis.min && plotData[i][0] <= chart.axes.xaxis.max ) {
            //this dataset from the original is within the zoomed region
            //You can save these datapoints in a new array
            //This new array will contain your zoom dataset
            //for ex: zoomDataset.push(plotData[i]);
            console.log(plotData[i]);
        }
    }
});

将 PF(çhart') 替换为 PF('myLineChartWV') 将使其适用于您的示例

收集数据后，您可以将其用于例如a PrimeFaces remoteCommand 将其传递给服务器。

请注意，此 仅考虑缩放的 x 轴 值。如果你想考虑 y 轴（所以真正的缩放区域），添加

  plotData[i][1] >= chart.axes.yaxis.min && plotData[i][1] <= chart.axes.yaxis.max

到循环中的 if 语句。

另请注意，它 只采用第一个系列 。如果你有多个，你有一些简单的功课要做。

Primefaces 图表中的区间选择事件

Interval Selection Event in Primefaces Chart

jsf

jsf-2

primefaces

jqplot

linechart