Question

我有一个动态的LineChart。我将缩放设置为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语句。

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

Primefaces图表中的区间选择事件

1 个答案: