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 上的浏览​​器开发工具中运行以下代码（来自上面的链接）将显示落在缩放区域内的数据点

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') 将使其适用于您的示例

收集数据后，您可以在例如一个 PrimeFaces remoteCommand 将其传递给服务器。

请注意，此仅考虑缩放的 x 轴值。如果您希望考虑 y 轴（因此真正的缩放区域），请添加

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

到循环中的 if 语句。

还要注意它只是拍摄了第一个系列。如果你有多个，你有一些简单的功课要做。