从Java填充JavaScript变量

时间:2019-07-11 20:33:49

标签: javascript jsf charts

我正在使用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]
                    ]);

0 个答案:

没有答案