Событие выбора интервала в диаграмме диаграмм направленности

Question

У меня динамический LineChart. Я устанавливаю масштаб на false, но я хочу, чтобы иметь возможность запускать событие Ajax при выборе области в диаграмме (например, функция масштабирования при выборе области, которую вы хотите увеличить), я хочу вызвать метод сервера и получить max и min x оси выбранной области. Может ли кто-нибудь помочь в этом?

Иначе, если я установил зум на true, есть ли способ получить значения из увеличенной области?

Answer 1

PrimeFaces и JSF в этом контексте не более чем генератор html/javascript/css. Если вы посмотрите на источник сгенерированной страницы в инструменте разработчика браузера, вы увидите много javascript, включая все 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> 

Таким образом, ответ на вопрос 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') сделает работу для ваш пример до

После того, как вы собрали данные, вы можете использовать это, например a PrimeFaces remoteCommand передать его на сервер.

Обратите внимание, что этот принимает только ось x значение увеличения во внимание. Если вы хотите, чтобы у оси приняты во внимание, чтобы (так ФПК зумирования), добавьте

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

к Условный оператор в цикле.

Также обратите внимание, что только занимает первую серию. Если у вас несколько, у вас есть несколько простых домашних заданий.