Primefaces图表中的间隔选择事件 [英] Interval Selection Event in Primefaces Chart

问题描述

我有一个动态的LineChart.我将缩放设置为false，但是我希望能够在图表中选择一个区域时触发Ajax事件(例如选择要缩放的区域时的缩放功能)，我想调用服务器方法并获取所选区域的最大和最小x轴值. 有人可以帮忙吗?

I have a dynamic LineChart. I am setting the zoom to false but I want to be able to trigger an Ajax Event when selecting an area in the Chart (like the zoom functionnality when selecting the area you want to zoom), I want to call a server method and getting the max and min x axis values of the selected area. Can anyone help with this?

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

Else if I set the zoom to true, is there any way to get the values from the zoomed area ?

推荐答案

PrimeFaces和JSF在此上下文中仅是html/javascript/css生成器.如果您在浏览器开发人员工具中查看生成页面的源代码，则会看到很多javascript，包括所有数据点.

PrimeFaces and JSF is in this context nothing more than an html/javascript/css generator. If you look at the source of the generated page in your browser developer tool, you'll see a lot of javascript, including all datapoints.

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

所以答案问题也适用于PrimeFaces图表.

So the answer to this question is valid for the PrimeFaces charts as well.

在您的浏览器开发人员工具中的缩放示例将为您显示缩放区域中的数据点

Running the following code (from the link above) in your browser developer tool on the zoom examples will show you the data points that fall in your zoom region

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('myLineChartWV')替换PF(çhart')将使其适用于您的示例

Replacing PF(çhart') with PF('myLineChartWV') will make it work for your example to

一旦您收集了数据，就可以在例如PrimeFaces remoteCommand将其传递到服务器.

Once you have gathered the data, you can use this in e.g. a PrimeFaces remoteCommand to pass it to the server.

请注意，该仅考虑缩放的x轴值.如果要考虑y轴(因此是实际的缩放区域)，请添加

Notice that this only takes the x-axis value of the zoom into account. If you want the y-axis taken into account to (so the real zoom area), add

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

进入循环中的if语句.

to the if-statement in the loop.

还要注意，它只是采用第一个系列.如果您有多个作业，则需要做一些简单的作业.

Also notice it just takes the first series. If you have multiple, you have some simple homework to do.

这篇关于Primefaces图表中的间隔选择事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！