我正在尝试使用primefaces线图缩放功能来检索部分数据。例如，假设x轴表示时间。如果整个折线图表示一周的数据，通过放大，我可以得到一天或几个小时的数据。
所以，我需要一个触发zoom事件的actionlistner，我可以从中检索缩放部分的开始时间和结束时间。
任何线索家伙？
提前致谢。
答案 0 :(得分：0)
好的......我猜noboby知道如何......无论如何，经过大量的挖掘和研究后我找到了答案......可以用javascript来完成...这就是我做的方法......将来任何人都需要它......
<script type="text/javascript" src="#{request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="#{request.contextPath}/js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src=".#{request.contextPath}/jsplugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" >
function open(){
$('#mainForm\\:myPlot').bind('jqplotZoom', function(plot){
var minVal = plot.axes.xaxis.min;
var maxVal = plot.axes.xaxis.max;
//perform any action with these values
});
}
</script>
主要代码部分 -
<p:lineChart id="myPlot"
value="#{myController.getChartForDialog()}"
legendPosition=""
yaxisLabel="Traffic"
xaxisLabel=""
zoom="true"
extender="open"
showMarkers="true"
seriesColors="ff0000"
style="height:200px; width: 100%" />
此折线图位于'mainForm'形式..
注意：也许可以删除一些js导入。没检查。
<强>更新
以下是上一代码的更新版本。此代码基本上放大到日期时间轴为x轴的折线图。如果开始和结束时间戳之间的差异小于一天，则刻度标签更改为 hh：mm 否则显示为 yy-MM-dd < / em>的。
使用的版本
我的bean类 -
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.DateAxis;
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;
@ManagedBean
public class ChartView implements Serializable {
private LineChartModel dateModel;
@PostConstruct
public void init() {
createDateModel();
}
public LineChartModel getDateModel() {
return dateModel;
}
private void createDateModel() {
dateModel = new LineChartModel();
LineChartSeries series1 = new LineChartSeries();
series1.setLabel("Series 1");
series1.set("2014-01-01", 51);
series1.set("2014-01-06", 22);
series1.set("2014-01-12", 65);
series1.set("2014-01-18", 74);
series1.set("2014-01-24", 24);
series1.set("2014-01-30", 51);
LineChartSeries series2 = new LineChartSeries();
series2.setLabel("Series 2");
series2.set("2014-01-01", 32);
series2.set("2014-01-06", 73);
series2.set("2014-01-12", 24);
series2.set("2014-01-18", 12);
series2.set("2014-01-24", 74);
series2.set("2014-01-30", 62);
dateModel.addSeries(series1);
dateModel.addSeries(series2);
dateModel.setTitle("Zoom for Details");
dateModel.setZoom(true);
dateModel.getAxis(AxisType.Y).setLabel("Values");
DateAxis axis = new DateAxis("Dates");
axis.setTickAngle(-50);
axis.setMax("2014-02-01");
axis.setTickFormat("%y-%m-%d");
axis.setTickCount(10);
dateModel.getAxes().put(AxisType.X, axis);
dateModel.setExtender("open");
}
}
我的xhtml类包含js代码 -
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h1>PrimeFaces</h1>
<h:form id="mainForm">
<script type="text/javascript">
function open(){
$('#mainForm\\:myPlot').bind('jqplotZoom', function(ev, gridpos, datapos, plot, cursor){
var minVal = plot.axes.xaxis.min;
var maxVal = plot.axes.xaxis.max;
var timeDiff = Math.abs(maxVal - minVal);
var dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
console.log(dayDiff);
if(dayDiff == 1){
plot.axes.xaxis.tickOptions.formatString="%H:%M";
plot.replot();
}
console.log(plot.axes.xaxis.tickOptions.formatString);
});
}
</script>
<p:chart type="line" id="myPlot" model="#{chartView.dateModel}" style="height:300px;" widgetVar="chart"/>
</h:form>
</h:body>
</html>
希望这有帮助。