JSF primefaces中的javascript xy图表在页面加载时消失

我有一个xy图表，其中的数据图是jsf primefaces页面中的数字。选择所需的图表类型，js将创建一个带有打印点的图表，但当JSF显示打印信息的datatable时，图表将消失。我已经调试了图表显示，只要正在创建图表，图表就会显示在屏幕上，但一旦图表完成，它就会消失，我想这是在创建数据表时。你知道如何在屏幕上显示图表吗？当用户使用showCubeChart（）js调用单击submit按钮时，图表将显示在“mycube”div元素中

var cubeConfig；
cubeConfigCache变种；
函数getCubeData（）{
//$cubeName=$（“#form\\\：cubeName”）.val（）；
$cubeName=“#{eventListMatrixModel.getCubeConfigName（）}”
//$cubeType=“#/{eventListMatrixModel.getCubeConfigType（）}”
$cubeType=$（“#表单\\:cubeTypeSelectOne_标签”）.text（）；
$cubeType=$cubeType.substr（0,1）
$projectId=“#{eventListMatrixModel.GetProjectedTostring（）}”；
警报（“ajax调用”+$cubeName+“CubeType=“+$CubeType+”=“+”PID=“+$projectId”）；
如果（$cubeType==null | |$cubeType==“”）返回；
警报（“发出ajax调用”）；
var infoHTML=''；
$.ajax({
url:“/pm2App/CubeServlet”，
数据类型：“json”，
数据：{cubeName:$cubeName，cubeType:$cubeType，projectId:$projectId}，
键入：“get”，
cache:false，
成功：功能（响应）
{
//警报（“成功”+响应）；
cubeConfig=响应；
makeCubeChart（）；
var infoHTML=''；
var name=response.name；
},
错误：函数（请求、文本状态、错误抛出）
{
警报（“错误：+textStatus”）；
cubeConfig=null；
},
完成：功能（请求、文本状态）
{
//警报（“complete1”+request.responseText）；
//警报（“完成2”+文本状态）；
}
});
}
函数showCubeChart（）{
//警报（“简单对话框显示成功”）；
//使用cacchecubeconfig
//警报（cubeConfig）；
//if（cubeConfig==null | | cubeConfig==“”）{
getCubeData（）；
//}其他{
//警报（“测试”）；
makeCubeChart（）；
// }
}
函数makeCubeChart（）
{
//if（！cubeConfigCache）{
警报（cubeConfig.cubeConfig.name）；
var xSize=cubeConfig.cubeConfig.xAxisCubeSize；
var ySize=cubeConfig.cubeConfig.yAxisCubeSize；
var中下限=立方图立方图立方图中下限；
var中高量程=立方图立方图中高量程；
var reductionType=cubeConfig.cubeConfig.reductionType；
var cubeType=cubeConfig.cubeConfig.cubeType；
警报（“回调”+xSize+“”+ySize）；
document.getElementById（'mycube'）.innerHTML=createCubeTable（xSize，ySize）；
var yLabels=新阵列（ySize）；
var yFactors=新阵列（ySize）；
var yCubeValueIds=新数组（ySize）；
var yAxisNumbers=新数组（ySize）；
var xLabels=新数组（xSize）；
var xFactors=新数组（xSize）；
var xCubeValueIds=新数组（xSize）；
var xAxisNumbers=新数组（ySize）；
对于（i=0；ySize>i；i++）{
YcubeValueId[i]=cubeConfig.YAxis[i].cubeValueId；
YaxisNumber[i]=cubeConfig.YAxis[i].axisNumber；
yLabels[i]=cubeConfig.YAxis[i].axisLabel；
yFactors[i]=cubeConfig.YAxis[i].axisFactor；
}
对于（i=0；xSize>i；i++）{
xCubeValueIds[i]=cubeConfig.XAxis[i].cubeValueId；
xAxisNumbers[i]=cubeConfig.XAxis[i].axisNumber；
xLabels[i]=cubeConfig.XAxis[i].axisLabel；
xFactors[i]=cubeConfig.XAxis[i].axisFactor；
}
setCubeLabels（xSize、ySize、xLabels、yLabels）；
setCubeFactors（xSize、ySize、xFactors、yFactors）；
setCubeCalcs（xSize，ySize）；
showCubeZeroCounts（xSize、ySize、cubeType、中低端、中高端）；
i=0；
while（cubeConfig.MatrixCount[i]）{
PEExposure=cubeConfig.MatrixCount[i]。风险敞口；
pCount=cubeConfig.MatrixCount[i]。计数；
showCubeCount（xSize、ySize、PEExposure、pCount）
//此处每个数据点上的警报都会减慢显示速度，以便您可以看到正在绘制的图表
警报（cubeConfig.MatrixCount[i].风险敞口）；
i=i+1；
}
setXAxisLegend（cubeConfig.cubeConfig.xAxisName）；
setYAxisLegend（cubeConfig.cubeConfig.yAxisName）；
cubeConfigCache=1；
}
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:p="http://primefaces.org/ui"
            template="/template/_Decorator.xhtml">
<f:metadata>
    <f:viewAction action="#{eventListMatrixModel.onPageLoad}" />
</f:metadata>

<ui:define name="bodyContent">
    <h:outputStylesheet name="/cube.css" library="css"/>
    <h:outputScript library="js" name="CubeIt.js" />
    <h:outputScript library="js" name="bignumber.js" />
    <h:head>
        <script>
            var cubeConfig;
            var cubeConfigCache;
            function getCubeData(){

                // $cubeName = $("#form\\:cubeName").val();
                $cubeName= "#{eventListMatrixModel.getCubeConfigName()}"
                //$cubeType= "#//{eventListMatrixModel.getCubeConfigType()}"
                $cubeType=$("#form\\:cubeTypeSelectOne_label").text();
                $cubeType=$cubeType.substr(0,1)
                $projectId="#{eventListMatrixModel.getProjectIdToString()}";
                alert("ajax call"+$cubeName+"  CubeType="+$cubeType+"="+" PID="+$projectId);
                if ($cubeType==null || $cubeType=="") return;
                 alert('making ajax call');
                var infoHTML='';
                $.ajax({
                    url: '/pm2App/CubeServlet',
                    dataType: 'json',
                    data: {cubeName: $cubeName,cubeType:$cubeType,projectId:$projectId},
                    type: 'get',
                    cache: false,
                    success: function(response)
                    {
                        //  alert("success"+response);

                        cubeConfig=response;
                        makeCubeChart();
                        var infoHTML = '';
                        var name = response.name;
                    },
                    error: function(request, textStatus, errorThrown)
                    {
                        alert("error:" + textStatus);
                        cubeConfig=null;
                    },
                    complete: function(request, textStatus)
                    {
                        //   alert("complete1" + request.responseText);
                        //   alert("complete2" + textStatus);
                    }
                });
            }
            function showCubeChart() {
                //  alert('Simple Dialog displayed successfully');
                // use cacche cubeConfig
                //alert(cubeConfig);
              //  if (cubeConfig == null || cubeConfig == '') {
                    getCubeData();
               // } else {
                    //alert('test');
                    makeCubeChart();
               // }
            }
            function makeCubeChart()
            {
                //  if (! cubeConfigCache) {
                  alert(cubeConfig.CubeConfig.name);
                var xSize = cubeConfig.CubeConfig.xAxisCubeSize;
                var ySize = cubeConfig.CubeConfig.yAxisCubeSize;
                var midLowRange = cubeConfig.CubeConfig.midLowRange;
                var midHighRange = cubeConfig.CubeConfig.midHighRange;
                var reductionType = cubeConfig.CubeConfig.reductionType;
                var cubeType = cubeConfig.CubeConfig.cubeType;
                 alert("Call Back "+xSize+"_"+ySize);
                document.getElementById('mycube').innerHTML = createCubeTable(xSize, ySize);
                var yLabels = new Array(ySize);
                var yFactors = new Array(ySize);
                var yCubeValueIds = new Array(ySize);
                var yAxisNumbers = new Array(ySize);
                var xLabels = new Array(xSize);
                var xFactors = new Array(xSize);
                var xCubeValueIds = new Array(xSize);
                var xAxisNumbers = new Array(ySize);
                for (i = 0; ySize > i; i++) {
                    yCubeValueIds[i] = cubeConfig.YAxis[i].cubeValueId;
                    yAxisNumbers[i] = cubeConfig.YAxis[i].axisNumber;
                    yLabels[i] = cubeConfig.YAxis[i].axisLabel;
                    yFactors[i] = cubeConfig.YAxis[i].axisFactor;
                }
                for (i = 0; xSize > i; i++) {
                    xCubeValueIds[i] = cubeConfig.XAxis[i].cubeValueId;
                    xAxisNumbers[i] = cubeConfig.XAxis[i].axisNumber;
                    xLabels[i] = cubeConfig.XAxis[i].axisLabel;
                    xFactors[i] = cubeConfig.XAxis[i].axisFactor;
                }

                setCubeLabels(xSize, ySize, xLabels, yLabels);
                setCubeFactors(xSize, ySize, xFactors, yFactors);
                setCubeCalcs(xSize, ySize);
                showCubeZeroCounts(xSize,ySize,cubeType,midLowRange,midHighRange);
                i=0;
                while (cubeConfig.MatrixCount[i]){
                    pExposure=cubeConfig.MatrixCount[i].riskexposure;
                    pCount=cubeConfig.MatrixCount[i].count;
                    showCubeCount(xSize,ySize,pExposure,pCount)
    // ALERT HERE ON EACH DATAPOINT SLOWS DOWN THE DISPLAY SO YOU CAN SEE THE CHART BEING DRAWN
                    alert(cubeConfig.MatrixCount[i].riskexposure);

                    i=i+1;

                }

                setXAxisLegend(cubeConfig.CubeConfig.xAxisName);
                setYAxisLegend(cubeConfig.CubeConfig.yAxisName);
                cubeConfigCache=1;
            }
        </script>

    </h:head>

    <h:form id="form">
        <p:growl showDetail="true" />
        <p:panelGrid header="Event List" closable="true"  >
            <p:row>
                <p:column><h:outputText value="Cube Type: " /></p:column>
                <p:column>
                    <p:selectOneMenu id="cubeTypeSelectOne" value="#{eventListMatrixModel.cubeType}"  panelStyle="width:180px"
                                     effect="fade"  style="width:160px"  update="@form">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItems value="#{eventListMatrixModel.cubeTypes.entrySet()}" var="c" itemLabel="#{c.value}" itemValue="#{c.key}" />
                    </p:selectOneMenu>
                </p:column>
                <p:column>
                    <p:commandButton value="Submit" id="submitButton" update="@form:matrixPanelGrid" onclick="showCubeChart()"
                                     actionListener="#{eventListMatrixModel.buttonAction}" styleClass="ui-priority-primary" />
                </p:column>
            </p:row>

            <p:row>
            <p:column><div id="mycube"></div></p:column>
            </p:row>

            <p:row>
            <p:column colspan="5">

            <p:panelGrid id="matrixPanelGrid" >
                <p:row><p:column>
                <p:dataTable value="#{eventListMatrixModel.projectEvents}" var="projectEvent"
                             selection="#{eventListEditModel.selectedEvents}"
                             rowKey="#{projectEvent.eventProjectId}"
                             sortMode="multiple"
                             resizableColumns="true"
                             widgetVar="eventsTable">
                    <f:facet name="header">
                        Cube Matrix #{eventListMatrixModel.pageName} Management
                    </f:facet>

                    <p:column selectionMode="multiple" style="width:2%" />
                    <p:column headerText="ID" >
                        <h:outputText value="#{projectEvent.projectEventId}" />
                    </p:column>
                    <p:column headerText="Project ID">
                        <h:outputText value="#{projectEvent.eventProjectId}" />
                    </p:column>
                    <p:column headerText="Event ID" sortBy="#{projectEvent.eventId}">
                        <h:outputText value="#{projectEvent.eventId}" />
                    </p:column>
                    <p:column headerText="Event Date" sortBy="#{projectEvent.eventDate}">
                        <h:outputText value="#{projectEvent.eventDate}">
                        <f:convertDateTime pattern="MM/dd/yyyy" />
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Type" sortBy="#{projectEvent.eventType}">
                        <h:outputText value="#{projectEvent.eventType}" />
                    </p:column>
                    <p:column headerText="Type Description" sortBy="#{eventListMatrixModel.getEventTypeDescription(projectEvent.eventType)}">
                        <h:outputText value="#{eventListMatrixModel.getEventTypeDescription(projectEvent.eventType)}" />
                    </p:column>
                    <p:column headerText="Title" sortBy="#{projectEvent.title}" filterMatchMode="contains" width="120">
                        <h:outputText value="#{projectEvent.title} " />
                    </p:column>
                    <p:column headerText="State">
                        <h:outputText value="#{eventListMatrixModel.getStateDescription(projectEvent.state)}" />
                    </p:column>
                    <p:column headerText="Status">
                        <h:outputText value="#{eventListMatrixModel.getStatusDescription(projectEvent.statusId)}" />
                    </p:column>
                    <p:column headerText="Workflow">
                        <h:outputText value="#{eventListMatrixModel.getWorkflowDescription(projectEvent.workflow)}" />
                    </p:column>

                    <p:column headerText="Edit" style="width:50px;">
                        <p:commandButton id="editButton" action="#{eventListMatrixModel.edit}" update="@form"  icon="ui-icon-pencil" title="Edit">
                            <f:setPropertyActionListener value="#{projectEvent}"  target="#{eventListMatrixModel.editProjectEvent}"   />
                        </p:commandButton>
                    </p:column>
                    <f:facet name="footer">
                        <p:commandButton value="Delete Events" actionListener="#{eventListMatrixModel.delete}"  update="@form"/>
                    </f:facet>
                </p:dataTable>
                </p:column></p:row>
            </p:panelGrid>
            </p:column>
            </p:row>

        </p:panelGrid>
        <script>
            //call after page loaded
            //cubeConfig=null;
           // window.onload=showCubeChart();
        </script>

    </h:form>
</ui:define>