javascript - Primefaces 单页上的多个 Highcharts 出现 JavaScript 错误

Question

我正在使用 Highcharts 4.2.5 在 Primefaces 6.0 应用程序中显示图表，该应用程序在(JSF 2.0、Java 7、Weblogic 11g)上运行。

我有一个要求，我需要在单个页面上显示多个动态图。图表未硬编码在页面上。事实上，它们需要根据用户权限动态呈现。一个用户可以看到 1 个图表，而其他用户可以在同一页面上看到多个图表。

我的问题是，由于 jsonp 数据上的一些解析器错误，我想为每个图单独调用的 jsonpCallback 函数没有成功调用。

奇怪的是，有时它会被某些图表调用，但在后续页面刷新后，它会给出解析器错误。下面是我的 JSF xhtml 代码/JS 代码/和浏览器控制台日志。下面的用例有 2 个图，但只有一个图正确渲染，其他给出了解析器

1. XHTML 代码。

     <ui:repeat var="c" value="#{cg.charts}" varStatus="status">
                   <div class="Container25 Responsive NoIndent">
                           <div class="EmptyBox20"></div>
   
                           <p:panel style="min-height: 300px;">
                               <div class="Container" >
                                   <!--<i class="icon-chart-bar Fs30 Fleft Wid25 red TexAlCenter" ></i>--> 
                                   <div id="chartContainer#{c.id}"></div>
                                   <script type="text/javascript">
                                       generateMLChart('chartContainer#{c.id}');
                                   </script>
                               </div>
                           </p:panel>
   
                   </div>
               </ui:repeat>
   

2. Javascript 代码

   function generateMLChart(divId){
   console.log('generateMLChart called... '+divId);
   chartType="prepareMLChartOptions";
   
   $.ajax({
           type: "GET",
           url:"./multilinechartservlet/"+Math.random()+"?jsonp="+chartType,
           dataType: 'jsonp',
           jsonpCallback: chartType, // the function to call
           success: function(json) {
                      console.log("divId = "+divId);
   
                       var len     = json.multilinedata.length;
                       //var divid   = json.divid;
                       i = 0;
   
                       // setting options variable
                       var options = {
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                               allButtonsEnabled: true
                            },
                            legend:{
                               enabled: true
                            },
                            title:{
                               text : 'Key Policy Interest Rates'
                            },
   
                            series: []
                       }
   
                       // setting options.series variable with json data, it should be a loop coz, it can have multiple series.
                       for (i; i < len; i++) {
                           options.series.push(json.multilinedata[i]);
                       }
   
                       // finally populate the charts container
                       $('#'+divId).highcharts("StockChart",options);
   
                       console.log('success function - complete');
           },
           error:  function(xhr, status, error) {
                     alert(error);
                     console.log("xhr.responseText ="+xhr.responseText);
                     console.log("status="+status);
                     console.log("error="+error);
                  }
           }); 
   
   }
   
   function prepareMLChartOptions(json,divId) {
   
       if(divId == undefined)
           return;
   
   } 
   

3. Chrome 控制台日志

status=parsererror multilinechart.js:49

error=Error: prepareMLChartOptions was not called

Answer 1

我通过调整我的generateMLChart()函数并使用$.getJSON而不是$.ajax解决了这个问题，并且在$.getJSON中，回调函数是动态函数，而不是静态函数。

    function generateMLChart(divId,
                    chartName,
                    chartId,
                    qNo) {
console.log('generateMLChart called... ' + divId+ ' - '+ chartName + ' - '+qNo);

$.getJSON("./chartservlet?chartId=" + divId + "&queryNumber=" + qNo, function (data, textStatus, jqxhr) {
    console.log("textStatus = " + textStatus);// Success
    console.log("jqxhr.status =" + jqxhr.status);// 200
    console.log("divId = " + divId);


    var len = data.multilinedata.length;
    i = 0;

    // setting options variable
    var options = {
        credits :  {
            enabled : false
        },
        rangeSelector :  {
            allButtonsEnabled : true
        },
        legend :  {
            enabled : true
        },
        title :  {
            text : chartName
        },
        series : []
    }

    // setting options.series variable with json data, it should be a loop coz, it can have multiple series.
    for (i;i < len;i++) {
        options.series.push(data.multilinedata[i]);
    }

    // finally populate the charts container
    $('#' + divId).highcharts("StockChart", options);

    console.log('-- success function - complete');

}).fail(function (jqxhr, settings, exception) {
    console.error("exception =" + exception);
    console.log("jqxhr =" + jqxhr);
    console.log("settings =" + settings);
    alert("Triggered ajaxError handler. Contact IT- Helpdesk");
});

    }