我正在使用google Google Charts库生成图形,但是现在我需要用Java服务器中已有的数据填充变量 整个页面都在jsf中
我需要用Java中数组中已经处理过的数据填充javascript中的数据变量
<ui:composition 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"
xmlns:pe="http://primefaces.org/ui/extensions"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<h:outputScript name="jquery/jquery.js" library="primefaces" target="head"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Rotacion', 'Deuda'],
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7]
]);
var options = {
title: 'Deuda vs. Rotacion comparacion',
hAxis: {title: 'Rotacion', minValue: 0, maxValue: 15},
vAxis: {title: 'Deuda', minValue: 0, maxValue: 15},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<style>
.ui-toolbar-group-left{
margin-top: 5px;
margin-left: 5px;
}
.tree-table-no-header thead tr th{
height: 0px;
margin: 0px !important;
padding: 0px !important;
}
.myclass{
padding: 2px 2px 2px 2px !important;
border-radius: 0;
/*background-color: #fefee6;*/
}
.alerta{
color: white;
background-color: #cc0101;
}
</style>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<p:messages id="messages">
<p:autoUpdate />
</p:messages>
<p:outputPanel id="container" layout="block">
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</p:outputPanel>
</ui:define>
</ui:composition>
在此变量中,您需要服务器中已经存在的值
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Rotacion', 'Deuda'],
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7]
]);