我正在制作一个Web应用程序,实际上使用Java EE,所以模式是这样的。查询从 DAO 模式发送到数据库。查询的结果被传递给控制器,控制器(servlet(将结果查询传递给作为JSP页的视图。
我一直在使用表达式语言来操作传入的servlet数据,但是现在由于我想操纵googlechart代码进行统计,我需要知道如何使用Javascript收集数据。
以下是一些详细信息:
这是DAO部分,选择门票类型并计算它们。
private static final String JPQL_SELECT_TICKETS_ETAT = "SELECT t.etat, COUNT(t.id_ticket) FROM Ticket t GROUP BY t.etat";
@PersistenceContext( unitName = "bdd_helpdesk_PU" )
private EntityManager em;
public List<Object[]> chargerTicketsParEtat() throws DAOException {
List<Object[]> liste;
//List<Object[]> results = em.createQuery("").getResultList();
TypedQuery<Object[]> query = em.createQuery(JPQL_SELECT_TICKETS_ETAT, Object[].class);
//query.setParameter(PARAM_TICKET, id_ticket);
try {
liste = (List<Object[]>) query.getResultList();
} catch ( NoResultException e ) {
return null;
} catch(Exception e) {
throw new DAOException(e);
}
return liste;
}
下一个代码发生在 servlet 中:
List<Object[]> lticket = ticketDao.chargerTicketsParEtat();
String test= "this is a string";
request.setAttribute("test", test);
request.setAttribute("lticket",lticket);
这是 JSP 页面:
结果在如下表中以数字表示:
<table>
<tr>
<th>Etat ticket</th>
<th>Nombre</th>
</tr>
<c:forEach items="${lticket}" var="ticket">
<tr>
<td>${ticket[0]}</td>
<td>${ticket[1]}</td>
</tr>
</c:forEach>
</table>
这就是我将要使用的那种哈特:
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
如何收集 lticket 数据,以便我可以将它们放在谷歌图表代码中。
我在项目中这样做的方式是使用 Gson 库将List<Object[]> lticket
转换为 JSON,并使用 request.setAttribute("lticketJson", json)
将其传递给 JSP。然后,您可以在 JSP 中使用它,就像chart.draw(${lticketJson}, options);
另一种选择是使用 JAX-RS 功能准备 REST 端点,这些功能将仅服务器 JSON 并使用 JavaScript fetch(( 或类似功能使用结果。